countdown.svelte.md

title	desc	published
Countdown	Countdown gives you a transition effect of changing numbers.	true

<script> import Component from "@components/Component.svelte" import ClassTable from "@components/ClassTable.svelte" import { prefix } from '$lib/stores'; import { replace } from '$lib/actions'; import { onMount } from "svelte" let counter = 59 function count(){ if (counter > 0) { counter-- setTimeout(count, 1000) }else{ counter = 59 setTimeout(count, 1000) } } onMount(() => { count() }) </script>

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

{
`
  
`
}

{
`
  
`
}

{
`
  
`
}

{
`
  
`
}

h m s

{
`
  h
  m
  s
`
}

{
`
  h
  m
  s
`
}

: :

{
`
  :
  :
  
`
}

{
`
  :
  :
  
`
}

days

hours

minutes

sec

{
`
  
    
      
    
    days
   
  
    
      
    
    hours
   
  
    
      
    
    min
   
  
    
      
    
    sec
  
`
}

{
`
  
    
        
    
    days
   
  
    
        
    
    hours
   
  
    
      
    
    min
   
  
    
      
    
    sec
  
`
}

days

hours

min

sec

{
`
  
    
      
    
    days
   
  
    
      
    
    hours
   
  
    
      
    
    min
   
  
    
      
    
    sec
  
`
}

{
`
  
    
      
    
    days
   
  
    
      
    
    hours
   
  
    
      
    
    min
   
  
    
      
    
    sec
  
`
}

days

hours

min

sec

{
`
  
    
      
    
    days
   
  
    
      
    
    hours
   
  
    
      
    
    min
   
  
    
      
    
    sec
  
`
}

{
`
  
    
      
    
    days
   
  
    
      
    
    hours
   
  
    
      
    
    min
   
  
    
      
    
    sec
  
`
}