Pie Chart

with Percentage


<div class="pie-chart" data-size="110" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)">
  <div class="pie-chart-content">
    <span class="percent"></span>
  </div>
</div>

without Scale

9


<div class="pie-chart" data-size="100" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="false" data-line-width="2">
  <div class="pie-chart-content">
    <h4 class="margin-0">9</h4>
  </div>
</div>

with Icon


<div class="pie-chart" data-size="100" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="false" data-line-width="2">
  <div class="pie-chart-content icon-2xl">
    <i class="ti-star text-black"></i>
  </div>
</div>

with Text

Text


<div class="pie-chart" data-size="120" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="false" data-line-width="2">
  <div class="pie-chart-content">
    <span class="font-family-tertiary font-small font-weight-normal uppercase">Text</span>
  </div>
</div>