FSCSS tutorial

Posted on Mar 6

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

#webdev #frontend #fscss #css

Most circular progress indicators require JavaScript or heavy libraries.

I wanted something lighter.

So I built a Circle Progress plugin for FSCSS that generates animated radial progress components using pure CSS and custom properties.

The result is a reusable component that can be customized with simple classes.

Demo

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.

All the logic is wrapped in an FSCSS plugin:
@circle-progress()
This generates the entire progress component including:

First include FSCSS.

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.15/exec.min.js" defer></script>

Then initialize the plugin.

@import(exec(_init circle-progress))

Create the progress component:

<div class="progress-circle p72">72%</div>

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:

<div class="progress-circle p45 blue">45%</div>

Changing Size

You can scale the component using a helper.

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

Example:

<div class="progress-circle p72 big">72%</div>

Why FSCSS Works Well for This

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){
  ...
}

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