Countdown

Countdown gives you a transition effect of changing numbers.

Class name		Type
countdown
Component
Countdown wrapper

you need to change the --value CSS variable using JS. Value must be a number between 0 and 99.

Countdown

<span class="$$countdown">
  <span style="--value:59;"></span>
</span>
<span class="$$countdown">
  <span style={{"--value":59}}></span>
</span>

Large text

<span class="$$countdown font-mono text-6xl">
  <span style="--value:59;"></span>
</span>
<span class="$$countdown font-mono text-6xl">
  <span style={{"--value":59}}></span>
</span>

Clock countdown

h m s
<span class="$$countdown font-mono text-2xl">
  <span style="--value:10;"></span>
  h
  <span style="--value:24;"></span>
  m
  <span style="--value:59;"></span>
  s
</span>
<span class="$$countdown font-mono text-2xl">
  <span style={{"--value":10}}></span>h
  <span style={{"--value":24}}></span>m
  <span style={{"--value":59}}></span>s
</span>

Clock countdown with colons

: : 
<span class="$$countdown font-mono text-2xl">
  <span style="--value:10;"></span>
  :
  <span style="--value:24;"></span>
  :
  <span style="--value:59;"></span>
</span>
<span class="$$countdown font-mono text-2xl">
  <span style={{"--value":10}}></span>:
  <span style={{"--value":24}}></span>:
  <span style={{"--value":59}}></span>
</span>

Large text with labels

days
hours
minutes
sec
<div class="flex gap-5">
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--value:15;"></span>
    </span>
    days
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--value:10;"></span>
    </span>
    hours
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--value:24;"></span>
    </span>
    min
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--value:59;"></span>
    </span>
    sec
  </div>
</div>
<div class="flex gap-5">
  <div>
    <span class="$$countdown font-mono text-4xl">
        <span style={{"--value":15}}></span>
    </span>
    days
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
        <span style={{"--value":10}}></span>
    </span>
    hours
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style={{"--value":24}}></span>
    </span>
    min
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style={{"--value":59}}></span>
    </span>
    sec
  </div>
</div>

Large text with labels under

days
hours
min
sec
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:15;"></span>
    </span>
    days
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:10;"></span>
    </span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:24;"></span>
    </span>
    min
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:59;"></span>
    </span>
    sec
  </div>
</div>
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":15}}></span>
    </span>
    days
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":10}}></span>
    </span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":24}}></span>
    </span>
    min
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":59}}></span>
    </span>
    sec
  </div>
</div>

In boxes

days
hours
min
sec
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:15;"></span>
    </span>
    days
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:10;"></span>
    </span>
    hours
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:24;"></span>
    </span>
    min
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--value:59;"></span>
    </span>
    sec
  </div>
</div>
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":15}}></span>
    </span>
    days
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":10}}></span>
    </span>
    hours
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":24}}></span>
    </span>
    min
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--value":59}}></span>
    </span>
    sec
  </div>
</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser