DEV Community

Cover image for How to Built an Animated Circle Progress Component Using FSCSS
FSCSS tutorial
FSCSS tutorial

Posted on • Edited on

How to Built an Animated Circle Progress Component Using FSCSS

#fscss #css #webdev #frontend

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 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.

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

  • the circular arc
  • animated glow dot
  • progress value display
  • customizable colors
  • responsive sizing

Usage

First include FSCSS.

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

Then initialize the plugin.

@import(exec(_init circle-progress))
Enter fullscreen mode Exit fullscreen mode

Create the progress component:

<div class="progress-circle p72">72%</div>
Enter fullscreen mode Exit fullscreen mode

Set the value with FSCSS:

.p72 { @progress-range(72) }
Enter fullscreen mode Exit fullscreen mode

Customizing Colors

You can create color variants easily.

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

Example:

<div class="progress-circle p45 blue">45%</div>
Enter fullscreen mode Exit fullscreen mode

Changing Size

You can scale the component using a helper.

.big { @progress-size(260px) }
Enter fullscreen mode Exit fullscreen mode

Example:

<div class="progress-circle p72 big">72%</div>
Enter fullscreen mode Exit fullscreen mode

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){
  ...
}
Enter fullscreen mode Exit fullscreen mode

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

More explanation on circle-progress readme

https://github.com/Figsh/Circle-progress.fscss/

Top comments (0)