How I Built an Animated Circle Progress Component Using FSCSS (No JavaScript)

Source: Dev.to

The Idea

The component uses a conic-gradient to draw the progress arc and a radial mask to turn it into a ring.
A small glowing dot follows the arc to give it a dynamic UI feel.

Features

• All logic wrapped in an FSCSS plugin: @circle-progress()
• Animated circular arc
• Animated glow dot
• Progress value display
• Customizable colors
• Responsive sizing

Installation

First include FSCSS:

Then initialize the plugin:

@import(exec(_init circle-progress));

Usage

Create the progress component:

72%

Set the value with FSCSS:

.p72 { @progress-range(72); }

Customizing Colors

You can create color variants easily:

.blue {
  --progress-color-arc: #4d9fff;
  --progress-color-glow: rgba(77,159,255,0.45);
}

Example

45%

Changing Size

Scale the component using a helper class:

.big { @progress-size(260px); }

Example

72%

Implementation Details

FSCSS allows reusable CSS logic using @define and @use.
Instead of repeating complex CSS, the entire component becomes a single reusable function:

@define circle-progress(selector) {
  /* component implementation */
}

This makes it easy to build UI components purely with CSS preprocessing logic.

Repository: