Skip to main content

Progress

Overview#

Progress is user interface element that indicates the progress of an operation.

Examples#

Labels#

Add labels to your progress bars by placing text within progress bar.

25% 

<uxf-progress progress="25" class="progress-bar" >    25%</uxf-progress>

Height#

Set a height value on the property height, so if you change that value the inner progress-bar will automatically resize accordingly.


<uxf-progress progress="25" height="1" class="progress-bar" ></uxf-progress>
<uxf-progress progress="25" height="20" class="progress-bar" ></uxf-progress>

Backgrounds#

Use background utility classes to change the appearance of individual progress bars.


<uxf-progress progress="25" variant="success" ></uxf-progress>
<uxf-progress progress="50" variant="info" ></uxf-progress>
<uxf-progress progress="75" variant="warning" ></uxf-progress>
<uxf-progress progress="100" variant="danger" ></uxf-progress>

Striped#

Add property striped to apply a stripe via CSS gradient over the progress bar’s background color.


<uxf-progress progress="25" variant="success" striped="true" ></uxf-progress><uxf-progress progress="50" variant="info" striped="true" ></uxf-progress><uxf-progress progress="75" variant="warning" striped="true" ></uxf-progress><uxf-progress progress="100" variant="danger" striped="true" ></uxf-progress>


<uxf-progress progress="25" variant="success" striped="true" ></uxf-progress><uxf-progress progress="50" variant="info" striped="true" ></uxf-progress><uxf-progress progress="75" variant="warning" striped="true" ></uxf-progress><uxf-progress progress="100" variant="danger" striped="true" ></uxf-progress>

Animated stripes#

The striped gradient can also be animated. Add property animated to animate the stripes right to left via CSS3 animations.

Toggle Animated
<uxf-progress id="progressAnimated" progress="75" animated="true"></uxf-progress>
<uxf-button id="toggleAnimation" variant="secondary">    Toggle animation</uxf-button>
<script>    const progressAnimated = document.getElementById('progressAnimated');    const toggleAnimation = document.getElementById('toggleAnimation');    toggleAnimation.addEventListener('click', function (event) {        progressAnimated.animated = !progressAnimated.animated;        progressAnimated.striped = !progressAnimated.striped;    });</script>