@ulu/frontend/lib/scss/components/_progress-circle.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Basic Donut Chart
  description: A circular progress indicator using an SVG donut chart structure.
-->
<div class="progress-circle">
  <div class="progress-circle__chart">
    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
      <circle class="progress-circle__chart-track" cx="16" cy="16" r="11"></circle>
      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="11" style="stroke-dasharray: 65 100;"></circle>
      <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
    </svg>
    <strong class="progress-circle__chart-value">65%</strong>
  </div>
</div>

<!-- @ulu-demo
  title: Pie Chart Variant
  description: Using the `progress-circle--pie` modifier to create a solid circular progress indicator.
-->
<div class="progress-circle progress-circle--pie">
  <div class="progress-circle__chart">
    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
      <circle class="progress-circle__chart-track" cx="16" cy="16" r="16"></circle>
      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="16" style="stroke-dasharray: 40 100;"></circle>
      <circle class="progress-circle__chart-mask" cx="16" cy="16" r="16"></circle>
    </svg>
    <strong class="progress-circle__chart-value" style="color: white;">40%</strong>
  </div>
</div>

<!-- @ulu-demo
  title: Small Progress Circle
  description: Using the `progress-circle--small` modifier for space-constrained layouts.
-->
<div class="progress-circle progress-circle--small">
  <div class="progress-circle__chart">
    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
      <circle class="progress-circle__chart-track" cx="16" cy="16" r="9.5"></circle>
      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="9.5" style="stroke-dasharray: 85 100;"></circle>
      <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
    </svg>
  </div>
  <div class="progress-circle__value">85% Complete</div>
</div>