Comment créer une bordure circulaire en CSS où x% est rouge et le reste est blanc, où x est une variable d'état dans un fichier JavaScript ?

Question

Je crée une application de minuterie qui a initialement un contour blanc autour du temps restant dans la minuterie. Je veux que l'anneau entourant le temps restant dans la minuterie devienne progressivement rouge, puis devienne complètement rouge lorsque la minuterie est épuisée.

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

.countdown-timer {
    largeur : 400 px ;
    hauteur : 400px ;
    bordure : 6px blanc uni ;
    rayon de bordure : 50 % ;
    ombre de boîte : noir ;

    famille de polices : "DM Sans" ;
    taille de police : 72 px ;

    affichage : flexible ;
    justifier-contenu : centre ;
    aligner les éléments : centre ;
    marge supérieure : 10 px ;
    marge gauche : auto ;
    marge droite : auto ;
}
J'ai essayé une approche en cercle concentrique, mais je n'ai pas obtenu l'effet souhaité. 
L'effet que je souhaite est : 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>

-----------------------------Fichier CSS----------------- --------- ------------------

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

Où X.time est un seuil de temps, au-delà de ce temps, l'anneau environnant doit rester blanc, et en dessous de ce temps, il deviendra rouge.