Wie erstelle ich in CSS einen kreisförmigen Rahmen, bei dem x % rot und der Rest weiß ist, wobei x eine Statusvariable in einer JavaScript-Datei ist?

Question

Ich erstelle eine Timer-App, die zunächst einen weißen Rahmen um die verbleibende Zeit des Timers hat. Ich möchte, dass der Ring um die verbleibende Zeit des Timers nach und nach rot wird und dann vollständig rot wird, wenn der Timer abgelaufen ist.

<div className="countdown-timer">
     <span>{remainingTime.hours}</span>
     <span>:</span>
     <span>{remainingTime.minutes}</span>
     <span>:</span>
     <span>{remainingTime.seconds}</span>
</div>

.countdown-timer {
    Breite: 400px;
    Höhe: 400px;
    Rand: 6 Pixel einfarbig weiß;
    Randradius: 50 %;
    Kastenschatten: schwarz;

    Schriftfamilie: „DM Sans“;
    Schriftgröße: 72px;

    Anzeige: Flex;
    rechtfertigen-Inhalt: Mitte;
    align-items: center;
    Rand oben: 10px;
    Rand links: auto;
    Rand rechts: auto;
}

Ich habe es mit einem konzentrischen Kreisansatz versucht, habe aber nicht den gewünschten Effekt erzielt.

Der gewünschte Effekt ist: https://i.stack.imgur.com/AVOz3.png

Answer 1

<div>
  {remaining.Time.seconds > X.time?(
  <div className="countdown-timer">
      <span>{remainingTime.hours}</span>
      <span>:</span>
      <span>{remainingTime.minutes}</span>
      <span>:</span>
      <span>{remainingTime.seconds}</span>
  </div>):(
    <div className="countdown-timer2">
      <span>{remainingTime.hours}</span>
      <span>:</span>
      <span>{remainingTime.minutes}</span>
      <span>:</span>
      <span>{remainingTime.seconds}</span>
  </div>

  )
  }
</div>

---------------------------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;
}

其中，X.time是一个时间阈值，超过这个时间，环绕的环应该保持白色，而在小于这个时间时，它将变为红色。