Progress

Progress Tracker

.fizz-progress-tracker can be used in several different contexts by setting a max-width on its container and/or changing the default colors.

There are a few default values expressed as CSS custom properties, which you can override inline as needed.

Custom Property Default Value Description
--progress 20% The percentage width of the left side of the bar
--left-color $color-green-600 The color of the left side of the bar
--right-color $color-gray-300 The color of the right side of the bar

3/5 Cases

HTML 
<div style="max-width: 110px">
  <p class="fizz-text-small fizz-text-center fizz-stack-8"><strong>3/5 Cases</strong></p>
  <div class="fizz-progress-tracker" style="--progress: 60%;"></div>
</div>

Customizing the bar colors

You can override the default colors either by setting the values of --left-color and --right-color inline, or use the data attribute data-type to use a predefined color combination.

Value --left-color --right-color
credit-utilization $color-navy-600 $color-green-400

Key

You can use .fizz-key classes to display a color-coded key for a .fizz-progress-tracker or elsewhere. Currently we have .fizz-key-red, .fizz-key-blue and .fizz-key-green.

Utilized Credit

$2,990.00

Available Credit

$7,080.87

HTML 
<div class="fizz-bordered fizz-inset-square-16" style="max-width: 537px;">
  <div class="fizz-progress-tracker fizz-stack-8" style="--progress: 60%; --left-color: #F26D77; --right-color: #91DCB9"></div>
  <div class="fizz-flex-row">
    <div class="fizz-key-red fizz-flex-item">
      <p class="fizz-text-medium fizz-stack-4"><strong>Utilized Credit</strong></p>
      <p class="fizz-heading-2 fizz-text-regular">$7,080.87</p>
    </div>
    <div class="fizz-key-green fizz-flex-item">
      <p class="fizz-text-medium fizz-stack-4"><strong>Available Credit</strong></p>
      <p class="fizz-heading-2 fizz-text-regular">$2,990.00</p>
    </div>
  </div>
</div>

Progress List

Apply .fizz-progress-list to an ordered list (<ol>). The current step list item should have a class of .fizz-is-active and each step's list item should have a data-step attribute containing the text that will appear on small screens for which step of how many. (ex. data-step="1 of 3")

You should also apply a max-width via inline styles as needed.

  1. Business Details
  2. Your Distributors
  3. Your Sales Reps
HTML 
<ol class="fizz-progress-list fizz-margin-auto" style="max-width: 514px;">
  <li class="fizz-is-active" data-step="1 of 3">Business Details</li>
  <li data-step="2 of 3">Your Distributors</li>
  <li data-step="3 of 3">Your Sales Reps</li>
</ol>

Previous steps in the process should include the class .fizz-is-complete on the list item element and the text should be enclosed in an anchor tag linking to the step.

  1. Business Details
  2. Your Distributors
  3. Your Sales Reps
HTML 
<ol class="fizz-progress-list fizz-margin-auto" style="max-width: 514px;">
  <li data-step="1 of 3" class="fizz-is-complete"><a href="details.html">Business Details</a></li>
  <li class="fizz-is-active" data-step="2 of 3">Your Distributors</li>
  <li data-step="3 of 3">Your Sales Reps</li>
</ol>

Vertical Progress List

There is one default value expressed as a CSS custom Property, which you can override inline as needed.

Custom Property Default Value Description
--first-col 175px The minimum width of the progress label column
  1. Order paid on delivery

    You paid Eagle Rock $821.02 on August 3rd, 2021

    Paid from Chase

  2. Provi pays you

    Provi lent you $821.02 on August 3rd, 2021

    Deposited to Chase-7701

  3. You close your Tab

    You pay Provi $861.02 on Sep 4th, 2021

    Withdraw from Chase-7701, ($821.02 + $42.07, 3% fee)

HTML 
<ol class="fizz-progress-list-vertical">
  <li class="fizz-is-complete">
    <div>Order paid on delivery</div>
    <div>
      <p>You paid Eagle Rock <strong>$821.02</strong> on August 3rd, 2021<p>
      <p class="fizz-text-small fizz-text-subdued">Paid from Chase</p>
    </div>
  </li>
  <li class="fizz-is-complete">
    <div>Provi pays you</div>
    <div>
      <p>Provi lent you <strong>$821.02</strong> on August 3rd, 2021<p>
      <p class="fizz-text-small fizz-text-subdued">Deposited to Chase-7701</p>
    </div>
  </li>
  <li class="fizz-is-active">
    <div>You close your Tab</div>
    <div>
      <p>You pay Provi <strong>$861.02</strong> on Sep 4th, 2021<p>
      <p class="fizz-text-small fizz-text-subdued">Withdraw from Chase-7701, ($821.02  +  $42.07, 3% fee)</p>
    </div>
  </li>
</ol>

File Progress

Shows the progress of a file upload by updating a custom property. When the progress reaches 100%, a checkmark appears and the cancel button changes to a delete button.

See the code sample below for an example of the JavaScript. Fizz does not ship any JavaScript, so you'll need to include something similar in your component.

Custom Property Default Value Description
--progress 0 Dictates the width of the progress bar. Can be updated dynamically with JavaScript.
js-sell-sheet1.pdf
HTML 
<div class="fizz-file-progress fizz-stack-8" style="--progress: 0;">
  <span class="fizz-text-small fizz-text-subdued">js-sell-sheet1.pdf</span>
  <div>
    <button class="fizz-icon-button fizz-button-small"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fizz-icon-16"><title>Cancel</title><path d="m12.667 4.273-.94-.94L8 7.06 4.274 3.333l-.94.94L7.06 8l-3.726 3.726.94.94L8 8.94l3.727 3.726.94-.94L8.94 8l3.727-3.727Z" fill="#848484"/></svg></button>
    <button class="fizz-icon-button fizz-button-small"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fizz-icon-16"><title>Delete</title><path d="M4 12.667C4 13.4 4.6 14 5.333 14h5.334C11.4 14 12 13.4 12 12.667v-8H4v8Zm8.667-10h-2.333L9.667 2H6.334l-.667.667H3.334V4h9.333V2.667Z" fill="#848484"/></svg></button>
  </div>
</div>

<script>
  var i = 0;
  
  function progress() {
    if (i == 0) {
      i = 1;
      let elem = document.querySelector('.fizz-file-progress');
      var progress = 1;
      var id = setInterval(frame, 5);
      function frame() {
        if (progress >= 100) {
          clearInterval(id);
          i = 0;
        } else {
          progress++;
          elem.style.setProperty("--progress", progress);
        }
      }
    }
  }
  </script>