Progress Since v1.1.0+

Progress bars can be used to display the current progress of an operation or event. Halfmoon supports different background colors, sizing, stacking, animations, and different types of labels for progress bars. 

<!-- Progress bars -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

How it works

Here's a list of things to understand about progress bars in Halfmoon.

  • A wrapper with the class .progress is used as a container for the progress bar.
  • The inner bar (.progress-bar) is used to show the actual progress. The width of this bar must be set with inline CSS, or sizing utilities (opens in new tab).
  • The progress bar should be given the role and aria attributes. This makes them accessible.
  • Progress components (.progress) are block level elements, so they will take up the full width of their parent. In the above example, they are placed inside a container with the class .w-300 (sets width: 30rem (300px) property). They also have no margins, so the ones in the above example are also given the class .mt-15 (sets margin-top: 1.5rem (15px) property). None of this is shown in the code for the sake of conciseness. This also applies to the other examples on this page.

Background colors #

The background color of the progress bar can be changed by adding background color utility classes (opens in new tab) to the bar itself. 

<!-- Primary progress bar (default, without utility class) -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Success progress bar -->
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Secondary progress bar -->
<div class="progress">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Danger progress bar -->
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Sizing and labels #

Labels can be added by placing text inside the progress bars (.progress-bar). However, you may have noticed that the default height of the bar is a bit too small to actually fit in text. Therefore, when using labels, it is a good idea to increase the height of the bar using sizing utilities (opens in new tab).

75% 
<div class="progress h-25"> <!-- h-25 = height: 2.5rem (25px) -->
  <div class="progress-bar w-three-quarter rounded-0" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> <!-- w-three-quarter = width: 75%, rounded-0 = border-radius: 0 -->
</div>

In the above example, the progress wrapper is given the class .h-25, which sets the height: 2.5rem (25px) property. This makes room for the label. Moreover, the bar's width here is actually set using a utility class as well. The bar's rounded borders are also removed to give it a more traditional look.

Please do note that other types of labels can also be added using progress groups (jump to section).

Stacking #

Multiple progress bars can also be stacked inside the wrapper. It becomes necessary to use different background colors when stacking progress bars. 

<!-- Stacked progress bars -->
<div class="progress">
  <!-- Default progress bar -->
  <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <!-- Success progress bar -->
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- More stacked progress bars -->
<div class="progress">
  <!-- Default progress bar -->
  <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <!-- Success progress bar -->
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <!-- Secondary progress bar -->
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <!-- Danger progress bar -->
  <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated progress bars #

Progress bars can also be animated by adding the .progress-bar-animated class to the bar. The animation is a nice little shine.

By default, the highlight is white in color. This works well for the default bar, but for progress bars with the .bg-success or .bg-secondary classes, the highlight can be changed to a dark color by adding the .highlight-dark class to the bar. 

<!-- Animated progress bar (default) -->
<div class="progress">
  <div class="progress-bar progress-bar-animated" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Animated success progress bar (highlight dark) -->
<div class="progress">
  <div class="progress-bar bg-success progress-bar-animated highlight-dark" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Animated secondary progress bar (highlight dark) -->
<div class="progress">
  <div class="progress-bar bg-secondary progress-bar-animated highlight-dark" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Animated danger progress bar -->
<div class="progress">
  <div class="progress-bar bg-danger progress-bar-animated" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Progress group #

One or more progress components can also be grouped together with labels, or with each other. This is done by simply wrapping them in a container with the class .progress-group. The labels should also be given the .progress-group-label class.

75%
Success
Warning
Danger 
<!-- Progress group with two progress bars -->
<div class="progress-group">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<!-- Progress group with animated progress bar and text label -->
<div class="progress-group">
  <div class="progress">
    <div class="progress-bar progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <span class="progress-group-label">75%</span>
</div>

<!-- Progress group with success progress bar and icon -->
<div class="progress-group">
  <div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <span class="progress-group-label">
    <i class="fa fa-check-circle text-success font-size-16"></i> <!-- text-success = color: var(--success-color), font-size-16 = font-size: 1.6rem (16px) -->
    <span class="sr-only">Success</span> <!-- sr-only = only for screen readers -->
  </span>
</div>

<!-- Progress group with secondary progress bar and icon -->
<div class="progress-group">
  <div class="progress">
    <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <span class="progress-group-label">
    <i class="fa fa-warning text-secondary font-size-16"></i> <!-- text-secondary = color: var(--secondary-color), font-size-16 = font-size: 1.6rem (16px) -->
    <span class="sr-only">Warning</span> <!-- sr-only = only for screen readers -->
  </span>
</div>

<!-- Progress group with danger progress bar and icon -->
<div class="progress-group">
  <div class="progress">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <span class="progress-group-label">
    <i class="fa fa-times-circle text-danger font-size-16"></i> <!-- text-danger = color: var(--danger-color), font-size-16 = font-size: 1.6rem (16px) -->
    <span class="sr-only">Danger</span> <!-- sr-only = only for screen readers -->
  </span>
</div>

As can be seen above, the labels inside progress groups are far more versatile. The elements with the .sr-only class are only displayed on screen readers. It gives sense in context to the icons. The icons being used are part of the Font Awesome 4.7.0 iconset.

Up next: Sticky alerts (Toasts)
On this page
Progress Background colors Sizing and labels Stacking Animated progress bars Progress group

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2025, Halfmoon UI