Radial Progress

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Radial Progress — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class radial-progress, with 0 modifiers:

• .radial-progress

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { RadialProgress } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { useState, useEffect } from "react";
import { RadialProgress } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";
import { COLORS } from "../lib/data";

export function RadialProgressDemo() {
    const [pct, setPct] = useState(0);

    useEffect(() => {
        const id = setInterval(() => setPct((p) => (p >= 100 ? 0 : p + 5)), 200);
        return () => clearInterval(id);
    }, []);

    return (
        <>
            <Section title="Colors">
                <Row>
                    {COLORS.slice(0, 6).map((color) => (
                        <RadialProgress key={color} value={70} color={color} />
                    ))}
                </Row>
            </Section>

            <Section title="Sizes">
                <Row>
                    <RadialProgress value={60} color="primary" diameter="3rem" thickness="0.35rem" />
                    <RadialProgress value={60} color="primary" diameter="5rem" thickness="0.5rem" />
                    <RadialProgress value={60} color="primary" diameter="8rem" thickness="0.75rem" />
                </Row>
            </Section>

            <Section title="Real use · animated upload progress">
                <RadialProgress value={pct} color="brand" diameter="6rem" />
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

RadialProgress — a circular ring; --value can't be an inline style (no inline style, ever), so the value snaps to the nearest of 21 literal [--value:N] utility buckets, same principle as Progress's width buckets. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("RadialProgress", "radial-progress", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "radial-progress radial-progress-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

nothing — this one is static markup