CSS で x% が赤、残りが白の円形の境界線を作成する方法 (x は JavaScript ファイルの状態変数)。

Question

最初はタイマーの残り時間を白い枠で囲むタイマー アプリを作成しています。タイマーの残り時間を囲むリングが徐々に赤くなり、タイマーがなくなると完全に赤くなるようにしたいと思います。

<div className="countdown-timer">
     <span>{残り時間.時間}</span>
     <スパン>:</スパン>
     <span>{残り時間.分}</span>
     <スパン>:</スパン>
     <span>{残り時間.秒}</span>
</div>

.countdown-timer {
    幅: 400ピクセル;
    高さ: 400ピクセル;
    境界線: 6 ピクセルの白一色。
    境界半径: 50%;
    ボックスシャドウ: 黒;

    フォントファミリー: "DM Sans";
    フォントサイズ: 72px;

    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
    マージントップ: 10px;
    マージン左: 自動;
    マージン右: 自動;
}

同心円アプローチを試しましたが、期待した効果が得られませんでした。

私が望む効果は次のとおりです: https://i.stack.imgur.com/AVOz3.png

Answer 1

リーリー

------------------CSS ファイル----------- ------ -----------------------

リーリー

このうち、X.time は時間の閾値で、それを超えると周囲のリングは白のままとなり、この時間を下回ると赤に変わります。