How to create a circular border in CSS where x% is red and the rest is white, where x is a state variable in a JavaScript file?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to create a circular border in CSS where x% is red and the rest is white, where x is a state variable in a JavaScript file?

P粉482108310 2023-07-24 18:47:03

423

I'm making a timer app that initially has a white surround around the remaining time in the timer. I want the ring surrounding the remaining time in the timer to gradually turn red, and then turn completely red when the timer runs out.

 {remainingTime.hours} : {remainingTime.minutes} : {remainingTime.seconds}

.countdown-timer { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; }

I tried a concentric circle approach but didn't get the effect I wanted.

The effect I want is: https://i.stack.imgur.com/AVOz3.png

P粉482108310

reply all (1)

P粉1112278982023-07-25 14:50:52 1 floor

 {remaining.Time.seconds > X.time?(  {remainingTime.hours} : {remainingTime.minutes} : {remainingTime.seconds} 
):(  {remainingTime.hours} : {remainingTime.minutes} : {remainingTime.seconds} 
 ) }

---------------------------------CSS File------------------ -----------------------

.countdown-timer { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; } .countdown-timer2 { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; border-color: red; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; }

Among them, X.time is a time threshold, beyond which the surrounding ring should remain white, and when less than this time, it will turn red.