Bagaimana untuk membuat sempadan bulat dalam CSS di mana x% berwarna merah dan selebihnya berwarna putih, di mana x ialah pembolehubah keadaan dalam fail JavaScript?

Question

Saya sedang membuat apl pemasa yang pada mulanya mempunyai keliling putih di sekitar baki masa dalam pemasa. Saya mahu deringan mengelilingi baki masa dalam pemasa bertukar merah secara beransur-ansur, dan kemudian bertukar merah sepenuhnya apabila pemasa kehabisan.

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

.countdown-timer {
    lebar: 400px;
    ketinggian: 400px;
    sempadan: 6px putih pepejal;
    jejari sempadan: 50%;
    kotak-bayang: hitam;

    font-family: "DM Sans";
    saiz fon: 72px;

    paparan: flex;
    justify-content: pusat;
    align-item: tengah;
    jidar atas: 10px;
    jidar-kiri: auto;
    margin-kanan: auto;
}

Saya mencuba pendekatan bulatan sepusat tetapi tidak mendapat kesan yang saya inginkan.

Kesan yang saya mahukan ialah: 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>

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

Di mana, X.time ialah ambang masa, selepas masa ini, cincin di sekeliling harus kekal putih, dan di bawah masa ini, ia akan bertukar menjadi merah.