DEV Community

Cover image for Building Circular UI with circle-progress.fscss (No JavaScript)
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

Building Circular UI with circle-progress.fscss (No JavaScript)

#fscss #tutorial #showdev #sharepoint

Circular progress, pie charts, and step rings usually mean SVG path math or a chart library.

circle-progress.fscss does it with pure CSS — conic-gradient, masks, and FSCSS @define helpers.

Repo: Figsh/Circle-progress.fscss

Showcase grid — ring, pie, steps, nested

What you get

Component Define
Progress ring @circle-progress
Solid pie @circle-pie
Multi-slice pie @circle-pie-multi
Steps ring @circle-steps
Nested rings Compose by nesting elements

All driven by CSS variables. Change --progress-value and the arc follows.

Setup

Option A — runtime (quick / prototyping)

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

Option B — CLI compile (production)
It works well with FSCSS vscode extention

npm install -g fscss
fscss styles.fscss styles.css
Enter fullscreen mode Exit fullscreen mode

Import the module:

@import((*) from circle-progress)

@progress-root()
@circle-progress(.progress-circle)
Enter fullscreen mode Exit fullscreen mode

Full sample page:

samples/example.html

1. Progress ring

Green 72% progress ring

<div class="progress-circle p72">72%</div>
Enter fullscreen mode Exit fullscreen mode 
.p72 { @progress-range(72) }
Enter fullscreen mode Exit fullscreen mode

Under the hood: a conic-gradient draws the arc, a radial mask cuts the hole, and a small tip marker rotates with the value.

2. Color override

Blue 41% ring

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

Same component — only tokens change.

Amber 88% ring

.p88 {
  @progress-range(88)
  --progress-color-arc: #ffb830;
  --progress-color-glow: rgba(255, 184, 48, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

3. Pie slice

Solid 30% pie

<div class="circle-pie p30">30%</div>
Enter fullscreen mode Exit fullscreen mode 
@circle-pie(.circle-pie)
.p30 { @progress-range(30) --progress-color-arc: #ff5070; }
Enter fullscreen mode Exit fullscreen mode

No mask — the conic fill is the whole disk.

4. Multi pie

4-slice multi pie

<div class="circle-pie-multi pie-a"></div>
Enter fullscreen mode Exit fullscreen mode 
@circle-pie-multi(.circle-pie-multi)

.pie-a {
  --pie-a: 30;
  --pie-b: 25;
  --pie-c: 20;
  --pie-d: 15;
}
Enter fullscreen mode Exit fullscreen mode

Four slices from four percentage tokens.

5. Steps ring

Steps 5/8

<div class="circle-steps steps-5">5/8</div>
Enter fullscreen mode Exit fullscreen mode 
@circle-steps(.circle-steps)
.steps-5 { @steps-done(5) @steps-total(8) }
Enter fullscreen mode Exit fullscreen mode

Steps 3/6 violet

.steps-3 {
  @steps-done(3)
  @steps-total(6)
  --progress-color-arc: #9d7eff;
}
Enter fullscreen mode Exit fullscreen mode

6. Nested rings

Nested green outer + blue inner

<div class="progress-circle p72" style="--progress-size:200px">
  <div class="progress-circle p41"
       style="--progress-size:120px;--progress-stroke:10px">
    41
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Same define, different size/stroke on the child — composition without new APIs.

Mental model

  1. Tokens — @progress-root() sets size, stroke, colors, value.
  2. Shape — one @define per pattern (ring, pie, steps).
  3. Value — @progress-range(n) or --progress-value.
  4. Theme — override --progress-color-arc / --progress-color-glow.

No SVG paths. No chart library. Change a variable, the circle updates.

When to use runtime vs CLI

Use case Prefer
Demos, CodePen, quick tests CDN runtime
Production, static deploy CLI compile to plain CSS

Runtime keeps FSCSS syntax in the page. CLI ships zero-runtime CSS.

Try it

Clone or copy from the repo and open the sample:

github.com/Figsh/Circle-progress.fscss

Sample: samples/example.html

Swap values, nest rings, add a pie — same module, different tokens.

Built with FSCSS @define · pure CSS circular UI

Top comments (0)