مینی پروژه ی progress bar

سلام دوستان و استاد صالحی عزیز

من یه progress bar طراحی کردم ولی میدونم که روش‌های خیلی بهتری هم برای اجراش هست و این راهیه که به ذهن من رسید

ممنون میشم مشارکت کنید و بگید به چه روش‌های دیگه ای میشه همچین کاری کرد

index.html

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Progress Bar</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
      <div class="container">
            <span>Loading</span>
            <span id="ok"> &#10003</span>
            <div class="loading"></div>
      </div>
</body>
</html>

style.css

.container{
      margin: 0px;
      width: 600px;
      height: 50px;
      border:  double black 2px;
      text-align: center;
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      font-size: xx-large;
      border-radius: 15px;
}
.container span{
      animation: colorchange 0s linear;
      animation-fill-mode: forwards;
      animation-delay: 2s;
}
.container #ok{
      opacity: 0;
      animation: ok 0s linear;
      animation-delay: 2s;
      animation-fill-mode: forwards;
}
.loading{
      border-radius: 13px;
      position: relative;
      transform: translateY(-43px);
      width: 10px;
      height: 50px;
      background-color: #333;
      animation: loading 2s linear;
      animation-fill-mode: forwards;
      z-index: -1;
}
@keyframes colorchange{
      from{
            color: black;
      }
      to{
            color: greenyellow            
      }
}
@keyframes ok{
      from{
            opacity: 0;
      }
      to{
            opacity: 1;
            color: greenyellow;
      }
}
@keyframes loading{
      from{
            width: 10px;
      }
      to{
            width: 600px;
      }
}