Container

Preview:

1/3
2/3
3/3

Configuration:

Output:

Vue component

            
<CircularProgressBar class="step-1-out-of-3">1/3</CircularProgressBar>
<CircularProgressBar class="step-2-out-of-3">2/3</CircularProgressBar>
<CircularProgressBar class="step-3-out-of-3">3/3</CircularProgressBar>

Raw HTML

            
<div class="circular step-1-out-of-3">
  <div class="inner"></div>
  <div class="number">1/3</div>
  <div class="circle">
    <div class="bar left">
      <div class="progress"></div>
    </div>
    <div class="bar right">
      <div class="progress"></div>
    </div>
  </div>
</div>

<div class="circular step-2-out-of-3">
  <div class="inner"></div>
  <div class="number">2/3</div>
  <div class="circle">
    <div class="bar left">
      <div class="progress"></div>
    </div>
    <div class="bar right">
      <div class="progress"></div>
    </div>
  </div>
</div>

<div class="circular step-3-out-of-3">
  <div class="inner"></div>
  <div class="number">3/3</div>
  <div class="circle">
    <div class="bar left">
      <div class="progress"></div>
    </div>
    <div class="bar right">
      <div class="progress"></div>
    </div>
  </div>
</div>

Comments