Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Progress

Overview

Display an indicator showing the relative completion of a task or activity.

Preview

View Kitchen Sink
Processing Commodities
4 of 10
<div class="fsa-progress" aria-live="polite">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Processing Commodities</div>
    <div class="fsa-progress__value">4 of 10</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary" style="transform: scaleX(.4)"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

A Progress indicator, or “Progress Bar” as it is often called, is an essential component for applications. Not only does a Progress indicator provide trust for the end User, but it also can provide valuable information as well. The general “rule of thumb” is that any process that requires the User to wait more than a second for something to load or finish, should provide a Progress indicator.

Variants and Examples

Progress indicators are styled with class="fsa-progress [fsa-progress--[VARIANT]".

Indeterminate, with label

Processing Claims
About 10 min
<div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
  <div class="fsa-progress__details">
    <div class="fsa-progress__label">Processing Claims</div>
    <div class="fsa-progress__value">About 10 min</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

Indeterminate, hidden label

Page loading
<div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Page loading</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

Determinate, with label/value

Soft Red Winter Wheat
0%
<div class="fsa-progress" aria-live="polite" id="showProgressWithLabel">
  <div class="fsa-progress__details">
    <div class="fsa-progress__label">Soft Red Winter Wheat</div>
    <div class="fsa-progress__value">0%</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

Determinate, hidden label

Downloading Terminal Adjustments
0%
<div class="fsa-progress" aria-live="polite" id="showProgress">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Downloading Terminal Adjustments</div>
    <div class="fsa-progress__value">0%</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

Determinate, manual demo

Uploading LDP
10%
<div class="fsa-progress" aria-live="polite">
  <div class="fsa-progress__details">
    <div class="fsa-progress__label">Uploading <abbr title="Daily Loan Deficiency Payment Rates">LDP</abbr></div>
    <div class="fsa-progress__value">10%</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary" id="showProgressAddition" style="transform: scaleX(0.1);"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

Determinate, example

Processing Commodities
4 of 10
<div class="fsa-progress" aria-live="polite">
  <div class="fsa-progress__details">
    <div class="fsa-progress__label">Processing Commodities</div>
    <div class="fsa-progress__value">4 of 10</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary" style="transform: scaleX(.4)"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>

Paired with Select, inline

Loading tracts
<div class="fsa-progress-inline">
  <div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
    <div class="fsa-progress__details fsa-sr-only">
      <div class="fsa-progress__label">Loading tracts</div>
    </div>
    <div class="fsa-progress__bar" aria-hidden="true">
      <div class="fsa-progress__primary"></div>
      <div class="fsa-progress__secondary"></div>
    </div>
  </div>
  <select name="UNIQUE-ID-WAGS" id="UNIQUE-ID-WAGS" class="fsa-select">
    <option>Farm 1234</option>
    <option>Farm 6789</option>
  </select>
</div>

Paired with Select, Fill Variant

Loading counties
<div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Loading counties</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>
<select name="UNIQUE-ID-WAGSYS61" id="UNIQUE-ID-WAGSYS61" class="fsa-select fsa-select--fill">
  <option>California</option>
  <option>Kansas</option>
</select>

Paired with Input, inline

Calculating age
<div class="fsa-progress-inline">
  <div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
    <div class="fsa-progress__details fsa-sr-only">
      <div class="fsa-progress__label">Calculating age</div>
    </div>
    <div class="fsa-progress__bar" aria-hidden="true">
      <div class="fsa-progress__primary"></div>
      <div class="fsa-progress__secondary"></div>
    </div>
  </div>
  <input type="text" class="fsa-input" value="05/14/1975">
</div>

Paired with Input, Fill Variant

Loading counties
<div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Loading counties</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>
<input class="fsa-input fsa-input--fill" value="California">

Paired with Table

Loading Commodities
Oats $/Bushel 1.43 2.97 1.92 0.00
Barley $/Bushel 1.75 3.30 2.60 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00 
<div class="fsa-progress fsa-progress--indeterminate" aria-live="polite" id="tableProgress">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Loading Commodities</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>
<table class="fsa-table fsa-table--borderless fsa-m-t--none">
  <thead>
    <tr>
      <th scope="col"><button class="fsa-table__sort" type="button">Commodity</button></th>
      <th scope="col" class="fsa-text-align--right" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Loan Rate</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Alternative PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oats $/Bushel</td>
      <td class="fsa-text-align--right">1.43</td>
      <td class="fsa-text-align--right">2.97</td>
      <td class="fsa-text-align--right">1.92</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Barley $/Bushel</td>
      <td class="fsa-text-align--right">1.75</td>
      <td class="fsa-text-align--right">3.30</td>
      <td class="fsa-text-align--right">2.60</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Wheat - Soft Red Winter $/Bushel</td>
      <td class="fsa-text-align--right">2.42</td>
      <td class="fsa-text-align--right">4.49</td>
      <td class="fsa-text-align--right">4.19</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Canola $/Cwt.</td>
      <td class="fsa-text-align--right">8.94</td>
      <td class="fsa-text-align--right">15.99</td>
      <td class="fsa-text-align--right">15.89</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Flaxseed $/Cwt.</td>
      <td class="fsa-text-align--right">10.13</td>
      <td class="fsa-text-align--right">15.90</td>
      <td class="fsa-text-align--right">14.62</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
  </tbody>
</table>

Paired with Box

Processing claims
Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga! 
<div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
  <div class="fsa-progress__details fsa-sr-only">
    <div class="fsa-progress__label">Processing claims</div>
  </div>
  <div class="fsa-progress__bar" aria-hidden="true">
    <div class="fsa-progress__primary"></div>
    <div class="fsa-progress__secondary"></div>
  </div>
</div>
<div class="fsa-box">
  Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga!
</div>

Paired with Header

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Paired with Modal

Paired with Growl Notification, modal-based

Paired with Growl Notification, default

Usage

Use

  • When the system has started an asynchronous process within a feature or section of the application that is not currently available for interaction.
  • When a User should be shown that data or files are in the process of being retrieved, updated, uploading, or deleted from the system.

Don’t Use

  • When the application is initially loading and the interface isn’t available.
  • When an asychronous process is occuring and the entire application should be unavailable to the User. Instead, use Splash Component.
  • As an animation on individual page controls that are not retrieving, updating, uploading, or deleting data of files from the system
  • On individual page controls if the loading process takes less than one second.

Accessibility

Always refer to the Accessibility Forms Guide for overall guidance.

  • Note the use of the aria-live="polite" attribute, which will alert the User with assistive technologies when they are not performing actions.
  • In general, the Progress component is a visual indicator, so alternative means should be used to communicate application status.

General Guidance

  • There are numerous instances when a Progress component should be shown, and based on the needs of the User and application, the choice of variants is important.

  • Utilize an Indeterminate Progress variant when the about of time is unknown or cannot be accurately approximated.

  • Utilize a Determinate variant when the application can provide an accurate representation of the progress of a specific process.

  • Applying a Progress component to an individual page control, such as a Text Input, should only be used when the asynchronous process occurs after interacting with that specific page control.

JavaScript Guidance

Disclaimer

All JavaScript included in the Design System's CSS Framework, fsa-style, are not approved for Production use. Their role is purely for demonstration purposes only, providing development teams with the inspiration, reference, and guidance to fully implement a component's UI behavior.

Script demonstrations are primarily UI-oriented, typically manipulating the HTML in basic ways (i.e. DOM Scripting). Two frequent examples:

  • Adding and/or removing a class, e.g. addClass('component-name--active')
  • Adding and/or removing an attribute, e.g. setAttribute('aria-expanded', 'false')

Summary

Some of the JavaScript being used to control the above examples is to mimick the behavior of an asychronous system delay, and the functionality would not been to be used in a real application.

Start Progress Animation

  • A conditional is being used to scale the the X property of the target.
  • Using .css('transform','scaleX(.' + newValue + ')') will scale the Target to the new percentage value (newValue) passed in.
  • When the asychronous process ends, $target.css('transform','scaleX(1)') is used to set the value to 100%.
  • Additional text-based numerical values can be shown in the labels to correspond with percent complete.
Return to top