Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Develop Design

Progress bar

Progress bars provide feedback to users about the progress of a process.

Guidance

The progress component is used to visually communicate the progress of a task or the completion status of a process. Progress is commonly used in forms, checkouts, surveys, and loading screens.

As a general rule, if a command takes more than 10 seconds to complete, you should show a progress bar.

Only use a progress bar when you can determine the percentage at any time. If your application does not support this, you can use a spinner component instead.

You'll need to include gnb-progress-1.0.0.js for this component at the bottom of your page before the closing body tag.


Progress bar

5%

HTML

<div class="gnb-progress">
	<div id="gnb-progress-bar">5%</div>
</div>
<br>
<!-- Button that triggers the 'move' function to run the progress bar -->
<button onclick="move()">Click to run</button>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-progress-1.0.0.js"></script>