Circle Percent

Basic Usage

Simple circular progress indicator

<circle-percent percent="75" title="Progress"></circle-percent>

Different Values

Various percentage levels

<circle-percent percent="25"></circle-percent>
<circle-percent percent="50"></circle-percent>
<circle-percent percent="100"></circle-percent>

Custom Colors

Different stroke colors

<circle-percent percent="60" stroke-color="#22c55e"></circle-percent>
<circle-percent percent="40" stroke-color="#f59e0b"></circle-percent>
<circle-percent percent="20" stroke-color="#ef4444"></circle-percent>

Custom Sizes

Different radius and stroke width

<circle-percent radius="30" stroke-width="3" size="small"></circle-percent>
<circle-percent radius="50" stroke-width="6"></circle-percent>
<circle-percent radius="70" stroke-width="8" size="large"></circle-percent>

Without Percentage

Hide the percentage text

<circle-percent percent="80" show-percent="false" title="Loading..."></circle-percent>

Thick Stroke

Larger stroke width for emphasis

<circle-percent percent="85" stroke-width="12" stroke-color="#06b6d4"></circle-percent>

Interactive Demo

Adjust the percentage dynamically

Percent

Radius

Stroke

Color

<circle-percent percent="50" stroke-color="#3b82f6" radius="60"></circle-percent>

Animated Progress

Watch the progress animate from 0 to 100%

// Animate 1% every 100ms
let percent = 0;
const interval = setInterval(() => {
  percent++;
  element.percent = percent;
  if (percent >= 100) clearInterval(interval);
}, 100);