Pie Chart

with Percentage


<div class="pie-chart" data-size="110" data-percent="90" data-bar-color="#B721FF" data-track-color="#F1D6FF" data-scale-color="rgba(18, 21, 24, 0.3)">
  <div class="pie-chart-content text-purple">
    <span class="percent"></span>
  </div>
</div>

without Scale

9


<div class="pie-chart" data-size="100" data-percent="90" data-bar-color="#0093E9" data-track-color="#DBEFFB" data-scale-color="false" data-line-width="2">
  <div class="pie-chart-content">
    <h3 class="m-0 text-blue">9</h3>
  </div>
</div>

with Icon


<div class="pie-chart" data-size="100" data-percent="90" data-bar-color="#6667AB" data-track-color="#E0E0EE" data-scale-color="false" data-line-width="2">
  <div class="pie-chart-content icon-2xl text-very-peri">
    <i class="bi bi-star"></i>
  </div>
</div>

with Text

Text

<div class="pie-chart" data-size="120" data-percent="90" data-bar-color="#BE1F35" data-track-color="#F4DBDE" data-scale-color="false" data-line-width="2">
  <div class="pie-chart-content">
    <h6 class="font-small fw-medium uppercase m-0 text-spring-red">Text</h6>
  </div>
</div>