Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Skeleton

Shimmering placeholders for content that is still loading: blocks, text lines and circles.

Actions and feedback4 classesNo JavaScriptLight and dark

Example

Full

Classes

4 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 skeleton. On a <div> in the example. Sets block display, height, corner radius, background and animation, and --skeleton-shine.
CSS
@media (prefers-reduced-motion: reduce) {
  .skeleton, .toast-item, .toast > .alert, .status-ping::after {
    animation: none;
  }
}

.skeleton {
  --skeleton-shine: color-mix(in oklab, var(--foreground) calc(7% * var(--mode)), color-mix(in oklab, var(--surface) calc(70% - 70% * var(--mode)), transparent));
  display: block;
  min-height: 0.75rem;
  border-radius: var(--m-radius-md);
  background-color: var(--surface-3);
  background-image: linear-gradient(100deg, transparent 30%, var(--skeleton-shine) 50%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: m-skeleton 1.6s ease-in-out infinite;
}
Modifier Modifier, combined with the skeleton class. On a <div> in the example. Sets height and corner radius, and --lines.
CSS
.skeleton-text {
  --lines: 3;
  height: calc(var(--lines) * 1.25rem - 0.5rem);
  border-radius: var(--m-radius-xs);
  -webkit-mask: repeating-linear-gradient(var(--foreground) 0 0.75rem, transparent 0.75rem 1.25rem) top / 100% calc(100% - 0.75rem) no-repeat,
    linear-gradient(var(--foreground) 0 0) bottom left / 62% 0.75rem no-repeat;
  mask: repeating-linear-gradient(var(--foreground) 0 0.75rem, transparent 0.75rem 1.25rem) top / 100% calc(100% - 0.75rem) no-repeat,
    linear-gradient(var(--foreground) 0 0) bottom left / 62% 0.75rem no-repeat;
}
Modifier Modifier, combined with the skeleton class. On a <div> in the example. Sets width and corner radius.
CSS
.skeleton-circle {
  width: 3rem;
  aspect-ratio: 1;
  border-radius: var(--m-radius-full);
}
Modifier Modifier, combined with the skeleton class. On a <div> in the example. Sets background and animation.
CSS
.skeleton-pulse {
  background-image: none;
  animation: m-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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">

<!-- Skeleton: start from the base class, then add modifiers -->
<div class="flex items-start gap-4" aria-hidden="true">
  <div class="skeleton skeleton-circle"></div>
  <div class="flex-1 space-y-3">
    <div class="skeleton h-4 w-1/3"></div>
    <div class="skeleton skeleton-text"></div>
  </div>
</div>
<div class="skeleton skeleton-pulse h-24 mt-4"></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

  • 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 feedbackRadial progressA circular progress ring drawn with a conic gradient and driven by the --value custom property.Actions and feedbackMeterA styled native meter that turns green, amber or red from its low, high and optimum values.Actions and feedbackTooltipA CSS only tooltip read from the data-tip attribute, shown on hover and keyboard focus, in four positions and eight tones.Actions and feedbackIndicatorPlaces a badge or status dot on any corner or edge of another element.

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.