Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Spinner

Loading indicators: spinner, ring, dots, bars and pulse, in five sizes and eight tones.

Actions and feedback18 classesNo JavaScriptLight and dark

Example

Full

Classes

18 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 spinner. On a <span> in the example. Sets inline-block display, alignment, width, corner radius, text color and background, and --tone, --spinner-size and --spinner-stroke.
CSS
@media (prefers-reduced-motion: reduce) {
  .spinner, .btn-loading::before, .progress:indeterminate {
    animation-duration: 2.4s;
  }
}

.spinner {
  --tone: currentColor;
  --spinner-size: 1.5rem;
  --spinner-stroke: max(2px, calc(var(--spinner-size) / 8));
  display: inline-block;
  flex: none;
  width: var(--spinner-size);
  aspect-ratio: 1;
  border-radius: var(--m-radius-full);
  color: var(--tone);
  background: radial-gradient(farthest-side, currentColor 94%, transparent) top / var(--spinner-stroke) var(--spinner-stroke) no-repeat,
    conic-gradient(transparent 12%, currentColor);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-stroke)), var(--foreground) calc(100% - var(--spinner-stroke) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-stroke)), var(--foreground) calc(100% - var(--spinner-stroke) + 1px));
  vertical-align: middle;
  animation: m-spin 0.8s linear infinite;
}
Modifier Modifier, combined with the spinner class. On a <span> in the example. Sets background, border and animation.
CSS
.spinner-ring {
  background: none;
  border: var(--spinner-stroke) solid color-mix(in oklab, currentColor 20%, transparent);
  border-top-color: currentColor;
  -webkit-mask: none;
  mask: none;
  animation-duration: 0.7s;
}
Modifier Modifier, combined with the spinner class. On a <span> in the example. Sets corner radius, width, background and animation, and --spinner-dot and --spinner-bar.
CSS
.spinner-dots, .spinner-bars {
  --spinner-dot: no-repeat radial-gradient(circle closest-side, currentColor 90%, transparent);
  --spinner-bar: no-repeat linear-gradient(currentColor 0 0);
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
}

.spinner-dots {
  width: calc(var(--spinner-size) * 1.75);
  aspect-ratio: 2;
  background: var(--spinner-dot) 0% 50%, var(--spinner-dot) 50% 50%, var(--spinner-dot) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: m-spinner-dots 1s linear infinite;
}
Modifier Modifier, combined with the spinner class. On a <span> in the example. Sets corner radius, background and animation, and --spinner-dot and --spinner-bar.
CSS
.spinner-bars {
  background: var(--spinner-bar) 0% 50%, var(--spinner-bar) 50% 50%, var(--spinner-bar) 100% 50%;
  background-size: 22% 100%;
  animation: m-spinner-bars 1s linear infinite;
}

.spinner-dots, .spinner-bars {
  --spinner-dot: no-repeat radial-gradient(circle closest-side, currentColor 90%, transparent);
  --spinner-bar: no-repeat linear-gradient(currentColor 0 0);
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
}
Modifier Modifier, combined with the spinner class. On a <span> in the example. Sets background and animation.
CSS
.spinner-pulse {
  background: currentColor;
  -webkit-mask: none;
  mask: none;
  animation: m-spinner-pulse 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
Size Extra small size. On a <span> in the example. Sets --spinner-size.
CSS
.spinner-xs {
  --spinner-size: 1rem;
}
Size Small size. On a <span> in the example. Sets --spinner-size.
CSS
.spinner-sm {
  --spinner-size: 1.25rem;
}
Size Medium, the default size. On a <span> in the example. Sets --spinner-size.
CSS
.spinner-md {
  --spinner-size: 1.5rem;
}
Size Large size. On a <span> in the example. Sets --spinner-size.
CSS
.spinner-lg {
  --spinner-size: 2.25rem;
}
Size Extra large size. On a <span> in the example. Sets --spinner-size.
CSS
.spinner-xl {
  --spinner-size: 3rem;
}
Tone Primary tone. On a <span> in the example. 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. On a <span> in the example. 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. On a <span> in the example. 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. On a <span> in the example. 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 <span> 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 <span> 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 <span> 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 <span> 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">

<!-- Spinner: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-6" role="status" aria-label="Loading">
  <span class="spinner spinner-primary"></span>
  <span class="spinner spinner-ring spinner-success"></span>
  <span class="spinner spinner-dots spinner-accent"></span>
  <span class="spinner spinner-bars spinner-warning"></span>
  <span class="spinner spinner-pulse spinner-info"></span>
  <span class="spinner spinner-danger"></span>
  <span class="spinner spinner-ring spinner-neutral"></span>
  <span class="spinner spinner-dots spinner-secondary"></span>
</div>
<div class="flex flex-wrap items-center gap-6 mt-4">
  <span class="spinner spinner-xs"></span>
  <span class="spinner spinner-sm"></span>
  <span class="spinner spinner-md"></span>
<!-- the full example is in the Code tab above -->

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

  • Announces itself with role="status" (polite) or role="alert" (assertive). Use alert only for messages that need immediate attention.
  • Animations stop under prefers-reduced-motion: reduce. Mark busy regions with aria-busy="true" and give spinners an accessible name.
  • 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 feedbackTagA squarer, smaller chip for metadata such as topics and versions.Actions and feedbackKeyboard keyKeyboard keys and shortcuts in five sizes.Actions and feedbackProgressA styled native progress element with tones, sizes, stripes and an animated indeterminate state.Actions and feedbackRadial progressA circular progress ring drawn with a conic gradient and driven by the --value custom property.

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.