BarBuilder App | Progress Bar Generator

🚧 BarBuilder Beta

Feedbacks Advertise Here

background

direction

round corners

space auto px

witdth auto px

height auto px

Title

color font size

Headline

color font size

general

direction

space auto px

backgroud

fulfill

round corners

% fullfill

show value

show text

width auto px

height auto px

color font size

CTA url

CTA as a button

Title

headline

70

CTA

<div class="progress-bar-container progress-bar-container-flex">
  <div class="hero-flex">
    <div class="title">Title</div>
    <div class="headline">headline</div>
  </div>
  <div class="progress-bar">
    <div class="progress"><span>70</span></div>
  </div>
  <div class="cta">
    <a href="#" target="_blank">CTA</a>
  </div>
</div>

.progress-bar-container {  
  background-color: rgba(0, 0, 0, 0);  
  padding: 15px;  
  border-radius: 0px;  
  width: 1264px;  
  height: 76px;  
}
  
.progress-bar-container-flex {  
  display: flex;  
  flex-direction: row;  
  gap: normal;  
  justify-content: center;  
  align-items: center;  
}
  
.progress-bar-container .hero-flex {  
  display: flex;  
  flex-direction: row;  
  gap: normal;  
  justify-content: center;  
  align-items: center;  
}
  
.progress-bar-container .title {  
  font-size: 16px;  
  color: rgb(0, 0, 0);  
}
  
.progress-bar-container .headline {  
  font-size: 16px;  
  color: rgb(0, 0, 0);  
}
  
.progress-bar-container .cta {  
  font-size: 16px;  
}
  
.progress-bar-container .cta a {  
  text-decoration: none;  
  color: rgb(0, 0, 238);  
  border: 0px none rgb(0, 0, 238);  
  border-radius: 0px;  
  padding: 0px;  
}
  
.progress-bar {  
  background-color: rgba(0, 0, 0, 0);  
  width: 1264px;  
  height: 19px;  
  border-radius: 0px;  
}
  
.progress {  
  display: flex;  
  justify-content: end;  
  align-items: center;  
  background-color: rgba(0, 0, 0, 0);  
  color: rgb(0, 0, 0);  
  padding: 5px;  
  text-align: right;  
  font-size: 16px;  
  width: 1264px;  
  height: 19px;  
  border-radius: 0px;  
}