Anatomy

    <.timer start_ms={60_000} class="timer" />

  

    <.timer start_ms={60_000} class="timer">
  <:start_trigger><.heroicon name="hero-play" /></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause" /></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play" /></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path" /></:reset_trigger>
</.timer>

  

    <.timer countdown start_ms={60_000} target_ms={0} class="timer">
  <:start_trigger><.heroicon name="hero-play" /></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause" /></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play" /></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path" /></:reset_trigger>
</.timer>

  

    <.timer
  countdown
  start_ms={86_400_000 * 4 + 3_600_000 * 12}
  target_ms={0}
  class="timer"
/>

  

    <.timer
  countdown
  start_ms={86_400_000 * 2 + 3_600_000}
  target_ms={0}
  class="timer"
  segments={[:days, :hours, :minutes, :seconds]}
/>

  

    <.timer start_ms={60_000} class="timer">
  <:separator> · </:separator>
</.timer>

  

    <.timer
  countdown
  start_ms={60_000}
  target_ms={0}
  class="timer"
  translation={%Corex.Timer.Translation{area_label: "Countdown"}}
/>

  

    <.timer
  countdown
  start_ms={86_400_000 + 3_600_000}
  target_ms={0}
  class="timer"
>
  <:day_label>d</:day_label>
  <:hour_label>h</:hour_label>
  <:minute_label>m</:minute_label>
  <:second_label>s</:second_label>
</.timer>

  

    <.timer
  countdown
  start_ms={86_400_000 * 2 + 3_600_000}
  target_ms={0}
  class="timer"
  segments={[:days, :hours, :minutes, :seconds]}
>
  <:separator>:</:separator>
  <:day_label>Days</:day_label>
  <:hour_label>Hours</:hour_label>
  <:minute_label>Minutes</:minute_label>
  <:second_label>Seconds</:second_label>
</.timer>

  

    <.timer start_ms={60_000} interval={2000} auto_start class="timer">
  <:start_trigger><.heroicon name="hero-play" /></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause" /></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play" /></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path" /></:reset_trigger>
</.timer>