Embedded countdown animation pie number inside button so it indicates how long is left before the button is active again let style document createElement style document body appendChild style style type text css style innerHTML countdowncontainer position relative display inline block margin auto width 15px height 15px text align center padding 1px countdownnumber color black pie position absolute top 0 left 0 width 100 height 100 background conic gradient red 0 0 blue 0 100 opacity 0 2 border radius 50 check the disabled flag on button to see if it s counting down or available function createCountdownButton let but document createElement button but type button but style position relative but innerHTML My Button div id countdowncontainer div but style padding left 12pt document body appendChild but let container document getElementById countdowncontainer container style visibility hidden let countdownNumberEl document createElement div countdownNumberEl id countdownnumber container appendChild countdownNumberEl let pie document createElement div pie id pie container appendChild pie but counter 10 countdownNumberEl textContent but counter but interval 1 but start function callback but counter 10 countdownNumberEl textContent but counter but children 0 style visibility visible but disabled true clearInterval but interval but interval setInterval function but countter but counter if but counter 0 but children 0 style visibility hidden but disabled false clearInterval but interval but interval 1 if callback undefined callback end callback countdownNumberEl textContent but counter let npc but counter 10 let pc 100 npc pie style background image conic gradient red 0 pc blue pc npc 1000 end setInterval return but let but createCountdownButton document body appendChild but but onclick function this start finished function finished console log finished console log click button to trigger countdown Embedded countdown animation pie number inside button so it indicates how long is left before the button is active again Check the disabled flag on button to see if it s counting down or available Merged into a single method so it can be include in a js file single js file function function createCountdownButton let but document createElement button but type button but style position relative but innerHTML My Button div id countdowncontainer div document body appendChild but let container document getElementById countdowncontainer container style position relative display inline block margin auto width 15px height 15px text align center padding 1px display none container style display none let countdownNumberEl document createElement div countdownNumberEl id countdownnumber countdownNumberEl style color black container appendChild countdownNumberEl let pie document createElement div pie id pie pie style position absolute top 0 left 0 width 100 height 100 background conic gradient red 0 0 blue 0 100 opacity 0 2 border radius 50 container appendChild pie but counter 10 countdownNumberEl textContent but counter but interval 1 but start function callback but counter 10 countdownNumberEl textContent but counter but children 0 style display inline block but disabled true clearInterval but interval but interval setInterval function but countter but counter if but counter 0 but children 0 style display none but disabled false clearInterval but interval but interval 1 if callback undefined callback end callback countdownNumberEl textContent but counter let npc but counter 10 let pc 100 npc pie style background image conic gradient red 0 pc blue pc npc 1000 end setInterval return but end createCountdownButton let but createCountdownButton document body appendChild but but onclick function this start finished function finished console log finished console log click button to trigger countdown
pie number inside button so it indicates how long is left before the button is active again Check the disabled flag on button to see if it s counting down or available Merged into a single method so it can be include in a js file single js file function function createCountdownButton let but document createElement button but type button but style position relative but innerHTML My Button div id countdowncontainer div document body appendChild but let container document getElementById countdowncontainer container style position relative display inline block margin auto width 15px height 15px text align center padding 1px display none container style display none let countdownNumberEl document createElement div countdownNumberEl id countdownnumber countdownNumberEl style color black container appendChild countdownNumberEl let pie document createElement div pie id pie pie style position absolute top 0 left 0 width 100 height 100 background conic gradient red 0 0 blue 0 100 opacity 0 2 border radius 50 container appendChild pie but counter 10 countdownNumberEl textContent but counter but interval 1 but start function callback but counter 10 countdownNumberEl textContent but counter but children 0 style display inline block but disabled true clearInterval but interval but interval setInterval function but countter but counter if but counter 0 but children 0 style display none but disabled false clearInterval but interval but interval 1 if callback undefined callback end callback countdownNumberEl textContent but counter let npc but counter 10 let pc 100 npc pie style background image conic gradient red 0 pc blue pc npc 1000 end setInterval return but end createCountdownButton let but createCountdownButton document body appendChild but but onclick function this start finished function finished console log finished console log click button to trigger countdown