Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Countdown timer

Counts down to a date: each .countdown-value with a data-unit updates every second, the timer label for screen readers changes once a minute, and an event fires at zero. Needs monsoon.js.

Interactive4 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-countdown="2027-01-01T00:00:00"

Options

OptionDescription
data-unit="days", "hours", "minutes" or "seconds" on each value; without days the hours keep counting

Methods

MethodDescription
Monsoon.countdown(el).left

Events

EventDescription
monsoon:tick { days, hours, minutes, seconds, total }
monsoon:countdown-end

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 countdown timer. On a <div> in the example. Sets flex display, alignment and gap.
CSS
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
Part Part of the countdown timer. On a <div> in the example. Sets flex display, alignment, width, padding, border and corner radius.
CSS
.countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: 0.875rem 0.625rem 0.75rem;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
  background: var(--surface);
}
Part Part of the countdown timer. On a <span> in the example. Sets text size, font weight, text style and generated content.
CSS
.countdown-value[style*="--value"]::before {
  counter-reset: cd var(--value);
  content: counter(cd, decimal-leading-zero);
}

.countdown-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
Part Part of the countdown timer. On a <span> in the example. Sets margin, text size, font weight, text style and text color.
CSS
.countdown-label {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Countdown timer: start from the base class, then add modifiers -->
<div class="countdown" role="timer" data-m-countdown="2027-01-01T00:00:00">
  <div class="countdown-box"><span class="countdown-value" data-unit="days"></span><span class="countdown-label">Days</span></div>
  <div class="countdown-box"><span class="countdown-value" data-unit="hours"></span><span class="countdown-label">Hours</span></div>
  <div class="countdown-box"><span class="countdown-value" data-unit="minutes"></span><span class="countdown-label">Minutes</span></div>
  <div class="countdown-box"><span class="countdown-value" data-unit="seconds"></span><span class="countdown-label">Seconds</span></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.
Data display and layoutCountdownNumber boxes with labels; the value is text or the --value custom property.InteractiveCommand searchMakes a .command-palette searchable: items filter by text and data-keywords, empty headings hide, arrows move the selection, Enter runs the item, and a hotkey such as Ctrl K opens the dialog. Needs monsoon.js.InteractiveInfinite scrollA sentinel that fires monsoon:load when it nears the viewport or a scroll container. Append the next items, then call detail.done(), or detail.done(false) at the end. Needs monsoon.js.InteractivePaste an imageFocus the zone and paste an image with Ctrl V, or drop one: a preview appears, a file input inside receives the file for the form, and Delete clears it. Needs monsoon.js.

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.