math-loader

index.html

CSS Loaders:
<div class="loader">
  <div class="item item-0">
    <div class="ball"></div>
  </div>
  <div class="item item-30">
    <div class="ball"></div>
  </div>
  <div class="item item-60">
    <div class="ball"></div>
  </div>
  <div class="item item-90">
    <div class="ball"></div>
  </div>
  <div class="item item-120">
    <div class="ball"></div>
  </div>
  <div class="item item-150">
    <div class="ball"></div>
  </div>
</div>

CSS Loaders With Rules:
<div class="loader loader-rules">
  <div class="item item-0">
    <div class="ball"></div>
  </div>
  <div class="item item-30">
    <div class="ball"></div>
  </div>
  <div class="item item-60">
    <div class="ball"></div>
  </div>
  <div class="item item-90">
    <div class="ball"></div>
  </div>
  <div class="item item-120">
    <div class="ball"></div>
  </div>
  <div class="item item-150">
    <div class="ball"></div>
  </div>
</div>

math-loader.markdown

math-loader

A Pen by Anton Fisher on CodePen.

License.

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.loader {
  position: basolute;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  margin: 10px 40px;
}

.loader-rules {
  border: 1px dashed lightgray;
}

.loader .item {
  position: absolite;
  margin: 0;
  padding: 0;
  height: 0;
  width: 100px;
  atransform: translate(-5px, 50px);
}

.loader .ball {
  position: relative;
  margin: 0;
  padding: 0;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  transform: translate(-5px, -5px);
}

.loader .item {
  position: absolute;
  margin:0;
  parring:0;
}
.loader-rules .item {
  border-top:1px dashed lightgray;
}

.loader .item-0 {
  transform: translate(-0.5px, 50px) rotate(0deg);
}
.loader .item-30 {
  transform: translate(-0.5px, 50px) rotate(30deg);
}
.loader .item-60 {
  transform: translate(-0.5px, 50px) rotate(60deg);
}
.loader .item-90 {
  transform: translate(-0.5px, 50px) rotate(90deg);
}
.loader .item-120 {
  transform: translate(-0.5px, 50px) rotate(120deg);
}
.loader .item-150 {
  transform: translate(-0.5px, 50px) rotate(150deg);
}

.loader .item .ball {
  animation: bounce 2.4s infinite cubic-bezier(.4,0,.6,1);
}
.loader .item-0 .ball {
  background-color: green;
  animation-delay: 0;
}
.loader .item-30 .ball {
  background-color: orange;
  animation-delay: -0.2s;
}
.loader .item-60 .ball {
  background-color: blue;
  animation-delay: -0.4s;
}
.loader .item-90 .ball {
  background-color: red;
  animation-delay: -0.6s;
}
.loader .item-120 .ball {
  background-color: purple;
  animation-delay: -0.8s;
}
.loader .item-150 .ball {
  background-color: lime;
  animation-delay: -1.0s;
}

@keyframes bounce {
  0.000% {
    transform: translate(0, -5px);
  }
  50.00% {
    transform: translate(90px, -5px);
  }
  100.0% {
    transform: translate(0, -5px);
  }
}