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

 {残り時間.時間} <スパン>: {残り時間.分} <スパン>: {残り時間.秒} 

.countdown-timer { 幅: 400ピクセル; 高さ: 400ピクセル; 境界線: 6 ピクセルの白一色。 境界半径: 50%; ボックスシャドウ: 黒; フォントファミリー: "DM Sans"; フォントサイズ: 72px; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; マージントップ: 10px; マージン左: 自動; マージン右: 自動; }

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

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