Progress Circular Bar

A circular progress bar visually represents progress in a circular format. It’s commonly used for loading indicators, task completion, and analytics.

Default Circular Progress Bar

XX/XX
Lorem
Ipsum

<h4>Default Circular Progress Bar</h4>
<div class="progress--circular" aria-valuenow="0%" aria-valuemin="30" aria-valuemax="100" style="--progress: 0%;">
  <div class="progressbar-text">
    <div class="medium-text-1">XX/XX</div>
    <div class="para--four">Lorem<br/>Ipsum</div>
  </div>
</div>

Active Circular Progress Bar

XX/XX
Lorem
Ipsum

<p>Active Circular Progress Bar</p>  
<div class="progress--circular" aria-valuenow="0%" aria-valuemin="30" aria-valuemax="100" style="--progress: 30%;">
    <div class="progressbar-text">
        <div class="medium-text-1">XX/XX</div>
        <div class="para--four">Lorem<br/>Ipsum</div>
    </div>
</div>

Completed Circular Progress Bar

XX/XX
Lorem
Ipsum
<h4>Completed Circular Progress Bar</h4>
<div class="progress--circular" aria-valuenow="0%" aria-valuemin="0" aria-valuemax="100" style="--progress: 100%;">
  <div class="progressbar-text">
    <div class="medium-text-1">XX/XX</div>
    <div class="para--four">Lorem<br/>Ipsum</div>
  </div>
</div>