<div class='progress' data-value='75' data-label=''></div>

<div class='progress rounded' data-value='20' data-label='Label'></div>

<div class='progress with-value' data-value='75' data-label='Label'></div>

<div class='progress striped with-value' data-value='75' data-label='Label'></div>

<div class='progress-circular' data-value="66"></div>

<br/>
<br/>
<svg width="100" height="100" viewBox="0 0 42 42" class="donut">
  <circle class="base-circle" cx="21" cy="21" r="15.91549430918954"></circle>

  <circle class="selected-value" cx="21" cy="21" r="15.91549430918954" stroke-dasharray="85 15" data-value="85%" stroke-dashoffset="25"></circle>
  <text x="12" y="25" fill="#0099FF">85%</text>
</svg>