??? ?????? ?? ???? ?????? ????? ?? ??? ??? UI ???? ??? ?????. ???? ??? ???? ?? ? ??? ??? ??? "?"? ????? ???? ???? ??? ????? ????. "???"UI? ???? ??? ?? ??? ?? ??? ??? ??????. ? ??? ??? ?? ??? ?? ?? ??? (Codepen? ?? ??? ? ??? ? ????), ??? ??? ?? ? ???? ????.

?? ??? ???? ??? ????? "Turn Time"???? ??? ????. ??? ???? ?? ??? ?? ? ? ??? ???? ?? ??? ? ??? ?? ??? ?????. ??? ??? ??? ?? ???? ??? UI ?????. ??? ????? ??? ??? ???? ???? ?? ??? "??? ?? ??? ?? ? ? ????.

? ???? ???? ?? ?? ???? ...

?? ????? ? ??? ???? ???? ?? ??/?? ?? ??? ??? ???.

<div>
  <div></div>
</div>

?? ??? ?? ?? ???? ? ???????.

 .round-time-bar div {
  ?? : 5px;
  ?? : ?? ???? (????, ???, #900);
}

??? ???? ?? ???? ??? ??? ?? ??? ??? ?????.

????, ??? ??? ??????? ???? ??? ???????. ??? ???? ??? ???? ??????! HTML ??? ??? ?? ?? ? ? ????. ?????? ??? JavaScript? ?? ?? ???? ??? ????. ??? ??? ????? ???? . ??? "??, ?? ????, ???? ?? ?? ??? ?? ???? ???????."

<div style="--duration: 5;">
  <div></div>
</div>

???? ???? ?? DOM ?? ?? ????? ?? ?????. --variable ? ??? ?, ???? DOM ??? ?? ??? ? ? ??? ??? ?? ??? ? ?? ? ? ??????. ??? ?? ?? ??? ? ????.

?? ?????? ?????. ?? ??? ????? ????. ??? ?? ?? ? ??????.

 @keyframes ??? ?? {
  ?? {
    /* ??????? ? ???`width`*/
    ?? : scalex (0);
  }
}

???? ?? ? ? ?? ???? ???? ?? ??? ??? "??"? ? ????. ????? ??? ????? ? ? ????. ??? ? ??? ????. ?? ?? ?? ????? ?? ?? ?????.

?? ??? ?????.

 .round-time-bar div {
  / * ... */
  ????? : ??? ?? ?? (var (-??) * 1s) ?? (var (-duration)) ???;
  ??-??? : ?? ??;
}

--duration ??? ???? ????? ?? ??? ???? ??? ??????? ??? ???? ??? ?????. ?? "Grid By Grid"? ???? ??? ?? steps() ???? ? ?????. "Bid-by-frame"? ??? ???? ??? UI ?? ? ? ???, JavaScript? ????? ??? ?? ??? ? ? ??? ????? ???? ???? ?? ?? ?? ????. ??? ?? ?? ??? ???? ? ? ?? ?? ??? ??????.

??? ???? ?????? ???? ?? ?? ??? ?? ? ? ????.

<div ...="" data-style="smooth"></div>

?? ?? steps ?? ?? ???? .

 .round-time-bar [data-style = "smooth"] div {
  ????? : ??? ?? ?? (var (-??) * 1s) ?? ???;
}

??? ?? ?? ?????? ???? ???? ??? ??? ????. ??? ?? ?? ????. ??????? ???, ??? ??? ?????. ?? ???? ?? ?? ???? ??? ???? ???? ??????.

??? data-attribute ?? API? ???? ?? ??? ??? ? ????.

 .round-time-bar [data-color = "blue"] div {
  ?? : ?? ???? (??, #64b5f6, #1565c0);
}

??? ??? ? "?"? ??? ???? ????. ?? ??? 10 ? ???? 5 ? ????? ?? ????.

 .round-time-bar [data-style = "??"] div {
  ?? : calc (var (-??) * 5%);
}

??? ?????.

CSS ?????? ?? ?????? ????????.

?, ?? ???, ?? ??? ??? ?? ?? ????<meter></meter> ??, ??? ?? ?? ? ? ???, ?? UI? ?? ????? ?????? ? ?? ????. ??? ??? ?? ???. ??? ? ???? ?? ? ?????? ?? ??? ??? ???? ?????? JavaScript? ???? ????? ?????? ??<meter></meter> , ? ?? ??? ??????? ???? ?? ??? ??? ???? ??? ? ????.

? ??? ??? ?? ????? CSS? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!