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