Starting minimum working example of an animated circular timer countdown graphic using css conic gradient document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdowncontainer position relative margin auto width 200px height 200px text align center padding 20px countdownnumber position absolute top 50 left 50 transform translate 50 50 font size 100px color white pie width 100 height 100 background image conic gradient orange 64 blue 17 blue background image conic gradient orange 0 blue 100 blue background conic gradient red 0 20 orange 20 90 yellow 90 100 background conic gradient red 0 0 blue 0 100 border radius 50 function countTimer let container document createElement div container id countdowncontainer document body appendChild container let countdownNumberEl document createElement div countdownNumberEl id countdownnumber container appendChild countdownNumberEl let pie document createElement div pie id pie container appendChild pie var counter 10 countdownNumberEl textContent counter setInterval function counter counter 0 10 counter countdownNumberEl textContent counter let npc counter 10 let pc 100 npc pie style background image conic gradient red 0 pc blue pc npc 1000 end setInterval end countTimer countTimer console log ready extended from previous version but with color tweaks document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdowncontainer position relative margin auto width 200px height 200px text align center padding 30px countdownnumber position absolute top 50 left 50 transform translate 50 50 font size 150px color white pie width 100 height 100 background conic gradient lightgray 0 0 gray 0 100 border radius 50 function countTimer let container document createElement div container id countdowncontainer document body appendChild container let countdownNumberEl document createElement div countdownNumberEl id countdownnumber container appendChild countdownNumberEl let pie document createElement div pie id pie container appendChild pie var counter 20 countdownNumberEl textContent counter setInterval function counter counter 0 20 counter countdownNumberEl textContent counter let npc counter 20 100 let pc 100 npc pie style background image conic gradient lightgray 0 pc gray pc npc 1000 end setInterval end countTimer countTimer console log ready
blue pc npc 1000 end setInterval end countTimer countTimer console log ready extended from previous version but with color tweaks document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdowncontainer position relative margin auto width 200px height 200px text align center padding 30px countdownnumber position absolute top 50 left 50 transform translate 50 50 font size 150px color white pie width 100 height 100 background conic gradient lightgray 0 0 gray 0 100 border radius 50 function countTimer let container document createElement div container id countdowncontainer document body appendChild container let countdownNumberEl document createElement div countdownNumberEl id countdownnumber container appendChild countdownNumberEl let pie document createElement div pie id pie container appendChild pie var counter 20 countdownNumberEl textContent counter setInterval function counter counter 0 20 counter countdownNumberEl textContent counter let npc counter 20 100 let pc 100 npc pie style background image conic gradient lightgray 0 pc gray pc npc 1000 end setInterval end countTimer countTimer console log ready