Get started

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

Start developing Start designing

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>