frutjam/dist/components/radial-progress.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.radial-progress{--radial-progress--size:var(--size,5rem);--radial-progress--thickness:var(--thickness,calc(var(--radial-progress--size)*0.1));--radial-progress--value:var(--value,0);--radial-progress--font-size:1rem;--color-radial-progress:currentColor;--color-radial-progress-track:var(--color-base-soft);width:var(--radial-progress--size);height:var(--radial-progress--size);border-radius:9999px;display:inline-grid;place-items:center;position:relative;font-size:var(--radial-progress--font-size);font-weight:600;color:var(--color-on-base);vertical-align:middle;flex-shrink:0;background:radial-gradient(closest-side,var(--color-base) calc(100% - var(--radial-progress--thickness)),transparent calc(100% - var(--radial-progress--thickness))),conic-gradient(var(--color-radial-progress) calc(var(--radial-progress--value)*1%),var(--color-radial-progress-track) 0)}.radial-progress-lg{--radial-progress--size:7rem;--radial-progress--thickness:0.625rem;--radial-progress--font-size:1.25rem}.radial-progress-md{--radial-progress--size:5rem;--radial-progress--thickness:0.5rem;--radial-progress--font-size:1rem}.radial-progress-sm{--radial-progress--size:4rem;--radial-progress--thickness:0.375rem;--radial-progress--font-size:0.75rem}.radial-progress-xl{--radial-progress--size:9rem;--radial-progress--thickness:0.75rem;--radial-progress--font-size:1.5rem}.radial-progress-xs{--radial-progress--size:3rem;--radial-progress--thickness:0.25rem;--radial-progress--font-size:0.625rem}.radial-progress-accent{--color-radial-progress:var(--color-accent)}.radial-progress-base{--color-radial-progress:var(--color-base-active)}.radial-progress-current{--color-radial-progress:currentColor}.radial-progress-error{--color-radial-progress:var(--color-error)}.radial-progress-info{--color-radial-progress:var(--color-info)}.radial-progress-neutral{--color-radial-progress:var(--color-neutral)}.radial-progress-primary{--color-radial-progress:var(--color-primary)}.radial-progress-secondary{--color-radial-progress:var(--color-secondary)}.radial-progress-success{--color-radial-progress:var(--color-success)}.radial-progress-warning{--color-radial-progress:var(--color-warning)}