Single-element loader

In this example below you will see how to do a Single-element loader with some HTML / CSS and Javascript

Havin' a play. Colours nicked from CSS tricks.

Thumbnail
This awesome code was written by q51, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright q51 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Single-element loader</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="loader"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/q51/single-element-loader-oXvybG */
body {
  background:#222;
  margin:0px;
  
}

/*container*/
.loader {
  position:fixed;
  top:0px;
  height:6px;
  width:100%;
  background:#333;
}

/*colour bars using box-shadows, this is what we animate, width for h-pos, and box-shadow for movement*/
.loader:before{
  position:fixed;
  top:0px;
  right:0px;
  content:"";
  height:6px;
  width:100%;
  box-shadow:
    100px 0px 0px 0px #e18728 inset,
    200px 0px 0px 0px #BE4C39 inset,
    300px 0px 0px 0px #9351A6 inset,
    400px 0px 0px 0px #4472B9 inset,
    500px 0px 0px 0px #4CA454 inset;
  -webkit-animation: loader 4s infinite;
}

/*little shadow at the bottom*/
.loader:after{
  position:fixed;
  top:0px;
  right:0px;
  content:"";
  height:6px;
  width:100%;
  box-shadow:
    0px -1px 0px 1px rgba(0,0,0,0.5) inset;
}

@-webkit-keyframes loader {
  0%  { 
      width:100%;
      box-shadow:
      0px 0px 0px 0px #e18728 inset,
      0px 0px 0px 0px #BE4C39 inset,
      0px 0px 0px 0px #9351A6 inset,
      0px 0px 0px 0px #4472B9 inset,
      0px 0px 0px 0px #4CA454 inset;
      }
  50% {
      width:50%;
      transform:translateX(-35%);
      box-shadow:
      100px 0px 0px 0px #e18728 inset,
      200px 0px 0px 0px #BE4C39 inset,
      300px 0px 0px 0px #9351A6 inset,
      400px 0px 0px 0px #4472B9 inset,
      500px 0px 0px 0px #4CA454 inset;
  }
  100%  { 
      width:0%;
      box-shadow:
      0px 0px 0px 0px #e18728 inset,
      0px 0px 0px 0px #BE4C39 inset,
      0px 0px 0px 0px #9351A6 inset,
      0px 0px 0px 0px #4472B9 inset,
      0px 0px 0px 0px #4CA454 inset;
      }
}

Comments