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.

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

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



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



/*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);