CSS pie countdown timer

Describe the feature you want: I have no idea what you’re doing behind the scenes to generate PNGs for the countdown timer, but there is an efficient way to do it with SVG and CSS animations.

To change the time it takes simply change the animation duration. To continue it from a specific point simply change the last 100 in stroke-dasharray:100 0 100; to whatever % you want (remember to change animation time to reflect).

<svg class="otpPie" viewBox="0 0 64 64"><circle class="pieBG" cx="32" cy="32" r="31.75"/><circle class="pie1" cx="-32" cy="32" r="15.9"/></svg>

.otpPie {width:32px;height:32px; margin-right:1em; vertical-align:middle; }
.pieBG {fill:#555; animation:60s linear 0s infinite both eatPieBG;}
.pie1 { transform:rotate(-90deg);fill:none; stroke:rgb(50,200,50); stroke-width:31.8; stroke-dashoffset:100; stroke-dasharray:100 0 100; /*ignore, offset, % */
animation:60s linear 0s infinite eatPie; }
@keyframes eatPie { to {stroke-dasharray:100 0 0;} }
@keyframes eatPieBG { 50% {fill:#555;} to {fill:#a00;} }

Why do you want this feature in Authenticator? To be smooooooth 😎

[Sneezry]

@alystair That’s okay. Then we will commit your code into the project. Thanks for your contribution!

[Sneezry]

Done