Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Radial progress

A circular progress ring drawn with a conic gradient and driven by the --value custom property.

Actions and feedback14 classesNo JavaScriptLight and dark

Example

Full

Classes

14 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the radial progress. On a <div> in the example. Sets inline-grid display, alignment, width, height, corner radius and text color, and 7 custom properties.
CSS
.radial-progress::before, .radial-progress::after {
  content: "";
  position: absolute;
  border-radius: var(--m-radius-full);
}

.radial-progress::after {
  inset: calc(50% - var(--thickness) / 2);
  background-color: var(--tone);
  transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
}
Size Extra small size. On a <div> in the example. Sets --size.
CSS
.radial-progress-xs {
  --size: 2.5rem;
}
Size Small size. On a <div> in the example. Sets --size.
CSS
.radial-progress-sm {
  --size: 3.25rem;
}
Size Medium, the default size. Not used in the example above. Sets --size.
CSS
.radial-progress-md {
  --size: 4rem;
}
Size Large size. On a <div> in the example. Sets --size.
CSS
.radial-progress-lg {
  --size: 5.5rem;
}
Size Extra large size. On a <div> in the example. Sets --size.
CSS
.radial-progress-xl {
  --size: 7rem;
}
Tone Primary tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-primary,
.alert-primary,
.callout-primary,
.banner-primary,
.badge-primary,
.chip-primary,
.tag-primary,
.spinner-primary,
.progress-primary,
.radial-progress-primary,
.tooltip-primary,
.status-primary {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
}
Tone Secondary tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.spinner-secondary,
.progress-secondary,
.radial-progress-secondary,
.status-secondary {
  --tone: color-mix(in oklab, var(--secondary-foreground) 45%, var(--secondary));
  --tone-fg: var(--secondary);
}
Tone Accent tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-accent,
.alert-accent,
.callout-accent,
.banner-accent,
.badge-accent,
.chip-accent,
.tag-accent,
.spinner-accent,
.progress-accent,
.radial-progress-accent,
.tooltip-accent,
.status-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Tone Neutral tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-neutral,
.alert-neutral,
.callout-neutral,
.banner-neutral,
.badge-neutral,
.chip-neutral,
.tag-neutral,
.spinner-neutral,
.progress-neutral,
.radial-progress-neutral,
.tooltip-neutral,
.status-neutral {
  --tone: var(--foreground);
  --tone-fg: var(--background);
}
Tone Success tone. On a <div> in the example. Sets --tone and --tone-fg.
CSS
.btn-success,
.alert-success,
.callout-success,
.banner-success,
.badge-success,
.chip-success,
.tag-success,
.spinner-success,
.progress-success,
.radial-progress-success,
.tooltip-success,
.status-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Tone Warning tone. On a <div> in the example. Sets --tone and --tone-fg.
CSS
.btn-warning,
.alert-warning,
.callout-warning,
.banner-warning,
.badge-warning,
.chip-warning,
.tag-warning,
.spinner-warning,
.progress-warning,
.radial-progress-warning,
.tooltip-warning,
.status-warning {
  --tone: var(--warning);
  --tone-fg: var(--warning-foreground);
}
Tone Danger tone. On a <div> in the example. Sets --tone and --tone-fg.
CSS
.btn-danger,
.alert-danger,
.callout-danger,
.banner-danger,
.badge-danger,
.chip-danger,
.tag-danger,
.spinner-danger,
.progress-danger,
.radial-progress-danger,
.tooltip-danger,
.status-danger {
  --tone: var(--danger);
  --tone-fg: var(--danger-foreground);
}
Tone Info tone. On a <div> in the example. Sets --tone and --tone-fg.
CSS
.btn-info,
.alert-info,
.callout-info,
.banner-info,
.badge-info,
.chip-info,
.tag-info,
.spinner-info,
.progress-info,
.radial-progress-info,
.tooltip-info,
.status-info {
  --tone: var(--info);
  --tone-fg: var(--info-foreground);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Radial progress: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-4">
  <div class="radial-progress" style="--value: 72" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">72%</div>
  <div class="radial-progress radial-progress-success radial-progress-lg" style="--value: 90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
  <div class="radial-progress radial-progress-warning radial-progress-sm" style="--value: 40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40</div>
  <div class="radial-progress radial-progress-danger radial-progress-xs" style="--value: 15" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="radial-progress radial-progress-info radial-progress-xl" style="--value: 58; --thickness: 0.5rem" role="progressbar" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">58%</div>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Actions and feedbackProgressA styled native progress element with tones, sizes, stripes and an animated indeterminate state.Actions and feedbackSpinnerLoading indicators: spinner, ring, dots, bars and pulse, in five sizes and eight tones.Actions and feedbackMeterA styled native meter that turns green, amber or red from its low, high and optimum values.Actions and feedbackSkeletonShimmering placeholders for content that is still loading: blocks, text lines and circles.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.