如何在CSS中建立一個圓形邊框，其中x%是紅色，其餘部分是白色，其中x是一個在JavaScript檔案中的狀態變數？

Question

我正在製作一個計時器應用程序，初始時有一個白色的環繞在計時器剩餘時間周圍。我希望將環繞計時器剩餘時間的環逐漸變為紅色，當計時器用盡時完全變為紅色。

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

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

我嘗試了一個以同心圓的方式，但沒有得到我想要的效果。

我想要的效果是：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是一個時間閾值，超過這個時間，環繞的環應該保持白色，而在小於這個時間時，它將變為紅色。