Progress bar
A progress bar indicates the percentage of completion of an action.
Line
<div class="ds-progress" data-progress="30">
<div class="ds-progress-bar">
<span class="ds-progress-bar-inner" style="--percentage:30"></span>
</div>
</div>
<div class="ds-progress" data-progress="100">
<div class="ds-progress-bar ds-progress-bar-stripes ds-progress-bar-success">
<span class="ds-progress-bar-inner" style="--percentage:100"></span>
</div>
</div>
<div class="ds-progress" data-progress="50">
<div class="ds-progress-bar ds-progress-bar-stripes active">
<span class="ds-progress-bar-inner" style="--percentage:50"></span>
</div>
</div>
<div class="ds-progress" data-progress="40">
<div class="ds-progress-bar ds-progress-bar-stripes ds-round ds-progress-bar-danger">
<span class="ds-progress-bar-inner" style="--percentage:40"></span>
</div>
</div>
<div class="ds-progress" data-progress="40">
<div class="ds-progress-bar">
<span class="ds-progress-bar-inner ds-progress-bar-stripes active ds-progress-bar-secondary ds-round" style="--percentage:40"></span>
</div>
</div>
Circular
<div class="ds-progress-circle ds-progress-circle-success mr20" data-progress="100" ></div>
<div class="ds-progress-circle ds-progress-circle-primary mr20" data-progress="75" ></div>
<div class="ds-progress-circle ds-progress-circle-lg ds-progress-circle-warning mr20" data-progress="50" ></div>
<div class="ds-progress-circle ds-progress-circle-sm ds-progress-circle-danger mr20" data-progress="25" ></div>
<div class="ds-progress-circle ds-progress-circle-sm ds-progress-circle-grey mr20" data-progress="15" ></div>
Guidelines
- Position the progress bar in the center of a screen for general functions.
- For specific tasks within a screen, position the progress bar adjacent to that task.