Progress

Progress

Progress bars are visual indicators to show the progression or amount complete for a given item. They’re similar to a chart and can be used with or without a label.

Default progress bar

Honeycomb does not use the HTML5 <progress> element for a number of reasons, the primary of which is the inconsistencies cross-browser and the use of non-standard browser prefixed pseudoclasses.

Instead, create a default, linear progress bar by adding the class .hc-progress to any element as well as sending the --hc-progress-value CSS variable, most likely inline with the style attribute. The bar will fill the parent container unless you set a width via utility class or some other way.

HTML
Expand Edit in Playground Copy 

<span class="hc-progress" style="--hc-progress-value: 30;"></span>

Linear attributes

The only required property is the --hc-progress-value CSS variable/property that must be set directly on the .hc-progress element. This should be a number between 1 and 100.

Other attributes and options include:

70% 82.5%
HTML
Expand Edit in Playground Copy 

<span class="hc-progress hc-progress--neutral" style="--hc-progress-value: 50;"></span>
<span class="hc-progress" style="--hc-progress-value: 70;">
  <span class="hc-progress-label">70%</span>
</span>
</span>
<span class="hc-progress hc-progress--info" style="--hc-progress-value: 82.5;">
  <span class="hc-progress-label">82.5%</span>
</span>
<span class="hc-progress hc-progress--complete hc-progress--complete--with-icon"></span>

A note on how the width is set

The width of the progress bar is based on the value you set for the --hc-progress-value CSS variable. This value must be between 0 and 100 for the bar to display correctly.

If there is no value set, the bar will be the default “zero width” state with just a small nub.

Moving the label outside the bar

The label does not need to exist within the progress bar. If you prefer to have it sit outside, move the .hc-progress-label element next to the .hc-progress bar and wrap everything inside of an element with class .hc-progress-wrapper.

14/20
HTML
Expand Edit in Playground Copy 

<span class="hc-progress-wrapper">
  <span class="hc-progress" style="--hc-progress-value: 70;"></span>
  <span class="hc-progress-label">14/20</span>
</span>

Radial progress bar

For certain contexts, like data cards or reports pages, a radial progress bar with a smaller footprint may make sense.

Use just the class .hc-progress-radial and pass in a value between 0 and 100 using the --hc-radial-value CSS variable directly. You can do this inline with a style attribute for the quickest and easiest way.

25% 70%
HTML
Expand Edit in Playground Copy 

<span class="hc-progress-radial" style="--hc-progress-value: 25;">25%</span>
<span class="hc-progress-radial" style="--hc-progress-value: 70;">70%</span>

By default, the progress bar will be the primary black color and a naked text label will inherit this color. This bar uses a complex box-shadow setup that heavily leans on currentColor.

To force the text label to be the primary text color instead of the progress bar’s color, simply wrap it with a <span> that has class .hc-progress-label.

33% 60%
HTML
Expand Edit in Playground Copy 

<span class="hc-progress-radial text-info-500" style="--hc-progress-value: 33;">33%</span>
<span class="hc-progress-radial text-peacock-500" style="--hc-progress-value: 60;">
  <span class="hc-progress-label">60%</span>
</span>

Animation

You can adjust the progress bar’s growth or reduction by changing the value for var(--hc-progress-value).

There is a 300ms transition on the size so there will be a slight animation every time you do this. You can currenly only change this value via JavaScript or some other way on your own, we do not yet support this in the library.

HTML
Expand Edit in Playground Copy 

<div class="flex flex-col gap-2 items-center">
  <label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="progress-toggle" class="hc-radio" value="20" onchange="document.getElementById('pba1').style.setProperty('--hc-progress-value', 20);document.getElementById('pba2').style.setProperty('--hc-progress-value', 20);" />
    <span class="hc-label">
      <span class="hc-label-text">Set bars to 20</span>
    </span>
  </label>
  <label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="progress-toggle" class="hc-radio" value="60" onchange="document.getElementById('pba1').style.setProperty('--hc-progress-value', 60);document.getElementById('pba2').style.setProperty('--hc-progress-value', 60);" checked="checked" />
    <span class="hc-label">
      <span class="hc-label-text">Set bars to 60</span>
    </span>
  </label>
</div>
<div class="flex flex-col items-center md:w-1/2 mx-auto gap-4 mt-8">
  <span class="hc-progress" id="pba1" style="--hc-progress-value: 60;"></span>
  <span class="hc-progress-radial" id="pba2" style="--hc-progress-value: 60;"></span>
</div>

Pre-defined linear animations

We have a few animations out of the box for linear progress bars that are visual only; that is, they do not correlate to data value adjustments or actual processing, they are just preset animated progress bars as a gimmick to show the app is thinking.

For these, apply the class .hc-progress--animate and then a duration modifier class of either .hc-progress--animate--10s or .hc-progress--animate--20s. The default has a 5s duration.

Normal 5s progression:

Staggered 10s progression:

Stalled 20s progression:

There are 3 animation styles. The default is a just a linear progression with an ease timing function. .hc-progress--animate--stagger creates a “working” progression where it looks like something is being done in the background. .hc-progress--animate--stall loads to 95% quickly and then stalls there for half the time.

The code for the above examples is as follows:


<span class="hc-progress hc-progress--warning hc-progress--animate"></span>
<span class="hc-progress hc-progress--info hc-progress--animate hc-progress--stagger hc-progress--animate--10s"></span>
<span class="hc-progress hc-progress--danger hc-progress--animate hc-progress--animate--stall hc-progress--animate--20s"></span>

Common contexts

Progress bars will most likely appear in table columns as a mini data visualization. They may also appear animated inside of modals as a way to alert the user that some task is taking a while to complete.

Take a look at the Table component for examples on what these can look like inside of a data table.

Within a modal, please try to cap the width of the progress bar to no more than around 800px as they can become too wide in connection with their height.

Other considerations: