Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

The progress bars indicate the progress of the work done out of the total work. It visually indicates the amount of work done using the bars. In semantic-UI, the progress bars come with a good interface and with different amazing classes. In this article, let us see about the progress active state.

Semantic UI Progress active state used class:

• active: It indicates that the current work progress is active through animation.

Syntax:

<div class="ui active progress" data-percent="..">
  <div class="bar">
     <div class="progress"></div>
  </div>
</div>

Example 1: The following code demonstrates the progress bar of the active state.

Output:

Example 2:  The following code demonstrates the progress bar of the active state with jQuery.

Output:

Reference: https://semantic-ui.com/modules/progress.html#active