need help creating a loading bar

March 15, 2024

I am trying to make a loading bar, just like in monkey type when it’s ‘downloading your data and applying settings’. I just want to make the bar, and the orange gradient move from the leftmost to the right.

I tried using a linear gradient for this, but it seems that it just flips between the two states ( which is also random).

body {
    background: black;
}

.line {
    position: absolute;
    width: 200px;
    height: 25px;
    margin: auto;
    background: linear-gradient(to right, orange, grey);
    border-radius: 25px;
    animation: gradual 2s ease-in-out infinite;
}

@keyframes gradual {
    0% {
        background: linear-gradient(to right, 0% orange, 100% grey);
    }

    100% {
        background: linear-gradient(to right, 100% orange, 0% grey);
    }
}

<div class='line'></div>

>Solution :

This code snippet utilizes CSS animations and keyframes to create a loading bar effect with an orange gradient moving from left to right. By animating the background-position. The animation duration is set to 2 seconds.

body {
  background: black;
}

.line {
  position: absolute;
  width: 200px;
  height: 25px;
  margin: auto;
  background: linear-gradient(to right, orange, grey);
  border-radius: 25px;
  animation: moveGradient 2s linear infinite;
}

@keyframes moveGradient {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}