Progress Figma Code Connected

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.

<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:

• Color: you can set the color by appending .hc-progress--neutral, .hc-progress--info, .hc-progress--danger, .hc-progress--warning, or .hc-progress--success.

• Complete status: set the bar to be complete by appending .hc-progress--complete, and add an optional check-circle icon by also adding .hc-progress--complete--with-icon.

• Embedded label: to show a label inside of the progress bar, create a <span> with class .hc-progress-label inside of the progress bar.

<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.

<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.

<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.

<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>

Small radial progress bar

Append the class .hc-progress-radial--sm for a smaller sized radial Progress. This version is 3rem in size (60% the size of the default) and is ideal for embedding inside of cards or other smaller elements.

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

Stacked progress

A slight variation on the linear Progress is this stacked label version. This allows for a longer label with a thinner progress bar underneath. Best for the meta section in a Card footer or other types of cards or stats.

<span class="hc-progress-stack">
  <span class="hc-progress-label">4/10 Next Steps completed</span>
  <span class="hc-progress" style="--hc-progress-value: 70;"></span>
</span>
<span class="hc-progress-stack">
  <span class="hc-progress-label">10/10 action items</span>
  <span class="hc-progress hc-progress--complete" style="--hc-progress-value: 100;"></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.

<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.

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:

• Please do not expand the height of a linear bar or change the colors beyond what Honeycomb provides.
• If another data visualization makes more sense, opt for that instead. For instance, don’t stack progress bars together when a bar chart would be more appropriate.
• You can always append a label after the progress bar inline by simply printing the label after it, as opposed to using the built-in overlay label.
• As always, let us know if you need more attributes or extensions!