Hello ,In this post i will show CSS Progress Bar design! Have you ever seen Progress Bars in the portfolio websites !! You perhaps don't know how to design them professionally and use them in your own website! There's nothing to be worry about because We will be using modern and unique CSS tricks to make the progress bar easy to work with in both css and HTML, You can do it

Index.html are here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
      <section>

        <div class="slider" style="--i:0"></div>
        <div class="slider" style="--i:1"></div>
        <div class="slider" style="--i:3"></div>
        <div class="slider" style="--i:4"></div>

      </section>
</body>
</html>


webdevsimplified,css tutorial, css progress bar, progress bar, css progress bar animation, css progress bar tutorial,javascript progress bar, javascript progress bar tutorial,progress bar tutorial,html progress bar,html progress bar tutorial,js progress bar, js progress bar tutorial,simple css progress bar,easy css progress bar,how to make a progress bar,how to make a progress bar css,how to make a progress bar js,how to make a progress bar animcation,css,js,html

Style.css are here :

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(215, 236, 260);
    display: grid;
    place-items: center;
}
section{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.slider{
    overflow: hidden;
    background-color: white;
    margin: 0 30px;
    height: 300px;
    width: 50px;
    border-radius: 30px;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.1),-15px -15px 30px #fff,
    inset -5px -5px 10px  rgba(0,0,255,0.1),
    inset 5px 5px 10px  rgba(0,0,0,0.1);
    position: relative;

}
.slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    border-radius: 30px;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1), -15px -15px 30px rgba(),
      inset -5px -5px 10px rgba(0, 0, 0, 0.2),
      inset 5px 5px 5px rgba(0, 0, 0, 0.1);
  }
 
  .slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: white;
    box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
      inset 5px 5px 5px rgba(0, 0, 0, 0.1);
    animation: animate 2.5s ease-in-out infinite;
    animation-delay: calc(-0.5s * var(--i));
  }
 
  @keyframes animate {
    0% {
      transform: translateY(250px);
      filter: hue-rotate(0deg);
    }
    50% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(250px);
      filter: hue-rotate(180deg);
    }
  }