CSS spinning vial

In this example below you will see how to do a CSS spinning vial with some HTML / CSS and Javascript

CSS loading animation of a spinning bar.

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

<head>
  <meta charset="UTF-8">
  <title>CSS spinning vial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="loading-bar">
  <div class="air">
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/bcardellini/css-spinning-vial-ZOWZaM */
body {
  background: #faf4f4;
}

.loading-bar {
  width: 10px;
  height: 80px;
  background: #08a;
  border-radius: 3px;
  border: 2px solid #444;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  animation: spinning 2s 0s linear infinite;
}

.air {
  background: white;
  width: 80px;
  height: 40px;
  position: relative;
  margin-left: -35px;
  border-radius: 5%;
  animation: reverse-spin 2s 0s cubic-bezier(1, -0.1, 0.85, 1.3) infinite;
  transform-origin: 40px 100%;
}

@keyframes spinning {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}
@keyframes reverse-spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(-180deg);
  }
}

Comments