CODEWITHSUNDEEP
htmlcssanimation
bhansa
bhansa

Reputation: 7504

Making a line animation loader

I am creating a loader animation and I have achieved something like this below:

I want the black line to move from, left -> right and then right -> left infinitely. Right now, it's only moving in one direction. 

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
  from {
    left: 300px;
  }
  to {
    left: 0;
  }
}
<div class="loader">
  <div class="blue-line"></div>
</div>

Upvotes: 0

Views: 2012

Answers (7)

Sonal Nagwekar
Sonal Nagwekar

Reputation: 14

You can use the following code for the same 

<html>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <style type="text/css">
    .loader {
      background: #ccc;
      width: 400px;
      height: 10px;
      border-radius: 10px;
      position: relative;
    }
    
    .loader .blue-line {
      background: #000;
      border-radius: 10px;
      position: absolute;
      left: 0;
      z-index: 1;
      width: 100px;
      height: 10px;
      animation: line-bounce 1s infinite;
    }
    
    @keyframes line-bounce {
      0% {
        left: 0px;
      }
      50% {
        left: 300px;
      }
      100% {
        left: 0px;
      }
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="loader">
        <div class="blue-line"></div>
      </div>
    </div>
  </div>

</body>

</html>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272807

An easier way is to simply add alternate to the animation and also adjust it like below to avoid using pixel values:

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  margin:10px 0;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite alternate;
}
@keyframes line-bounce {
  from {
    left: 100%;
    transform:translateX(-100%);
  }
  to {
    left: 0;
    transform:translateX(0);
  }
}
<div class="loader">
  <div class="blue-line"></div>
</div>
<div class="loader" style="width:500px">
  <div class="blue-line"></div>
</div>

<div class="loader" style="width:200px">
  <div class="blue-line"></div>
</div>

Upvotes: 1

Xenio Gracias
Xenio Gracias

Reputation: 2758

Hope this helps you thanks. if you want to lear more about keyframe then visit below link. thanks

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
    0%   {left: 0px;}
    50%  {left: 300px;}
    100% {left: 0px;}
 
}
<div class="loader">
  <div class="blue-line"></div>
</div>

Upvotes: 1

doğukan
doğukan

Reputation: 27389

Or, you can use only

 50% {
    left: 300px;
 }


.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}

.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1.6s infinite;
}

@keyframes line-bounce {
  
  50% {
    left: 300px;
  }
  
}
<div class="loader">
  <div class="blue-line"></div>
</div>

Upvotes: 1

Abhineet
Abhineet

Reputation: 632

Try it: fiddle

HTML: 

<div class="loader_trak">
  <div class="loader_bar">

  </div>
</div>

CSS:

.loader_trak {
      position: relative;
      height: 10px;
      background-color: #ccc;
      width: 250px;
    }

    .loader_bar {
      background-color: #333;
      position: absolute;
      height: 100%;
      width: 80px;
      animation: line-bounce 1s infinite;
    }
    @keyframes line-bounce {
      0% {
        left: 0;
      }
      50% {
        left: calc(100% - 80px);
      }
      100%{
        left: 0;
      }
    }

Upvotes: 0

bhansa
bhansa

Reputation: 7504

Thanks @לבני מלכה, I just made few changes to make it look more smoother.

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}

.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1.6s infinite;
}

@keyframes line-bounce {
  0% {
    left: 300px;
  }
  50% {
    left: 0;
  }
  100% {
    left: 300px;
  }
}
<div class="loader">
  <div class="blue-line"></div>
</div>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Use @keyframes with % 0/50/100 to back it use 100%{left: 300px;}

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
  0%{
    left: 300px;
  }
  50%{
    left: 0;
  }
100%{
 left: 300px;
}
}
<div class="loader">
  <div class="blue-line"></div>
</div>

Upvotes: 3

Related Questions