Creating a sleek line animation loading graphic

Question

Creating a sleek line animation loading graphic

I have been working on creating a loader animation that currently looks like this:

My goal is to make the black line move left to right and then right to left continuously. However, at the moment, it is 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>

html css animation

Answer 1

Answer №1

Try utilizing @keyframes alongside % values of 0/50/100 to achieve the desired effect using 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>

Answer 2

Try utilizing @keyframes alongside % values of 0/50/100 to achieve the desired effect using 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>

Answer 3

Answer №2

Alternatively, you have the option to utilize

 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>

Answer 4

Alternatively, you have the option to utilize

 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>

Answer 5

Answer №3

If you're looking to learn more about keyframes, please check out the following link:

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>

Answer 6

If you're looking to learn more about keyframes, please check out the following link:

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>

Answer 7

Answer №4

A simpler approach involves adding the alternate property to the animation and making adjustments for avoiding the use of pixel values as shown below:

.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>

Answer 8

A simpler approach involves adding the alternate property to the animation and making adjustments for avoiding the use of pixel values as shown below:

.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>

Answer 9

Answer №5

Appreciate the feedback @לבני מלכה, I've made some adjustments to enhance its fluidity.

.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>

Answer 10

Appreciate the feedback @לבני מלכה, I've made some adjustments to enhance its fluidity.

.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>

Answer 11

Answer №6

Give it a go: test it out

HTML:

<div class="loading_track">
  <div class="loading_bar">

  </div>
</div>

CSS:

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

    .loading_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;
      }
    }

Answer 12

Give it a go: test it out

HTML:

<div class="loading_track">
  <div class="loading_bar">

  </div>
</div>

CSS:

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

    .loading_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;
      }
    }

Answer 13

Answer №7

Feel free to utilize the code snippet below:

<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>

Answer 14

Feel free to utilize the code snippet below:

<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>

Creating a sleek line animation loading graphic

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Initiate automatic submission

Whenever a JavaScript Ajax Call is made, it consistently returns readyState=1 and status=0

The Chrome application does not retain cookies

The amazing property of AngularJS - Scope

I am looking to input and store the Kannada text used in my Angular project

Issue with JQM popup functionality in Firefox browser

Maintaining fixed position for cursor events in CSS

Customize the CSS styling of third-party components in different pages using NextJS

Transforming current application into a responsive Angular platform

Adjusting the width of images using jQuery Mobile or jqTouch

Using jQuery to modify the text content within an element

Is it possible to design a div with a curved lower edge?

Preventing links from functioning on dynamically generated web pages

Attempting to retrieve data from an HTML response using Node.js

Check if the browser is not Google Chrome before running the code in JavaScript

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

The box is not aligning properly

Learn how to send dynamic data to another HTML element using Ajax's success function

I'm trying to use Javascript to dynamically remove rows, but my code seems to be causing some issues

Using CSS to Create Text Wrapping