LocoMotion

Basic Countdown

A basic countdown accepts an ActiveSupport::Duration object as either the first positional argument or as the value of the :duration keyword argument.

Preview

Code

.flex.flex-col.gap-y-4.font-mono
  = daisy_countdown(60.seconds)
  = daisy_countdown(duration: 60.seconds, modifier: :letters)

Longer Countdown

If you want to display a countdown with multiple parts, you can build one using the ActiveSupport::Duration#build method.

Preview

hours

minutes

seconds

Code

.flex.flex-col.items-center.gap-y-4.font-mono
  = daisy_countdown(ActiveSupport::Duration.build(3725))
  = daisy_countdown(ActiveSupport::Duration.build(3725), separator: "-")
  = daisy_countdown(ActiveSupport::Duration.build(3725), modifier: :letters)
  = daisy_countdown(ActiveSupport::Duration.build(3725), modifier: :words)

Boxed Countdown

You can also display the countdowns in a box by customizing each part of the countdown.

Note that the wrapper text-sm class applies to the words ("hours", "minutes", and "seconds") and the global parts_css sets the size of the numbers.

You can also customize each part individually by using the days_css, hours_css, minutes_css, and seconds_css options.

And you can add custom HTML using either the global parts_html or the individual days_html, hours_html, minutes_html, and seconds_html options.

Preview

hours

minutes

seconds

Code

.flex.flex-col.items-center.gap-y-4.text-sm
  - box_css = "[:where(&)]:bg-neutral [:where(&)]:text-neutral-content rounded-box flex flex-col items-center p-2 [&_span]:font-mono [&_span]:text-5xl"
  = daisy_countdown(ActiveSupport::Duration.build(3725),
      modifier: :words,
      css: "gap-x-8",
      parts_css: box_css,
      seconds_css: "bg-red-600 text-white",
      seconds_html: { title: "You better hurry!" })

Countdowns

Basic Countdown

Longer Countdown

Boxed Countdown