CodePen Embed - CSS Loading Animations --Circle --5

<div class="container">

  <div class="wrapper">
    <div class="circle circle1"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle2"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle3 c31"></div>
    <div class="circle circle3 c32"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle4 c41"></div>
    <div class="circle circle4 c42"></div>
    <div class="circle circle4 c43"></div>
    <div class="circle circle4 c44"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle5 c51"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle6 c61"></div>
    <div class="circle circle6 c62"></div>
    <div class="circle circle6 c63"></div>
    <div class="circle circle6 c64"></div>
    <div class="circle circle4 c65"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle7 c71"></div>
    <div class="circle circle7 c72"></div>
    <div class="circle circle7 c73"></div>
    <div class="circle circle7 c74"></div>
    <div class="circle circle7 c75"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle8 c81"></div>
    <div class="circle circle8 c82"></div>
    <div class="circle circle8 c83"></div>
    <div class="circle circle8 c84"></div>
    <div class="circle circle8 c85"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle9 c91"></div>
    <div class="circle circle9 c92"></div>
    <div class="circle circle9 c93"></div>
    <div class="circle circle9 c94"></div>
    <div class="circle circle9 c95"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle10 c101"></div>
    <div class="circle circle10 c102"></div>
    <div class="circle circle10 c103"></div>
    <div class="circle circle10 c104"></div>
    <div class="circle circle10 c105"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle11 c111"></div>
    <div class="circle circle11 c112"></div>
    <div class="circle circle11 c113"></div>
    <div class="circle circle11 c114"></div>
    <div class="circle circle11 c115"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle12 c121"></div>
    <div class="circle circle12 c122"></div>
    <div class="circle circle12 c123"></div>
    <div class="circle circle12 c124"></div>
    <div class="circle circle12 c125"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle13 c131"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle14 c141"></div>
  </div>

  <div class="wrapper">
    <div class="circle circle15 c151"></div>
  </div>

</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #000;
}

.wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: rotate 2.5s linear infinite;
}

/* ==== Animation 1 ====  */
.circle1 {
  box-shadow: 0px 5px 5px 3px #0496ff, 0px -5px 5px 3px #ff0000,
    -5px 0px 5px 3px #a1ff0a, 5px 0px 5px 3px #f8ffe5;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ==== Animation 2 ====  */
.circle2 {
  box-shadow: 0px 5px 5px 3px #0496ff;
}

/* ==== Animation 3 ====  */
.circle3 {
  position: absolute;
  border-radius: 50%;
}

.c31 {
  border-left: 5px solid #ffb703;
}

.c32 {
  border-right: 5px solid #d00000;
}

/* ==== Animation 4 ====  */
.circle4 {
  position: absolute;
  border-radius: 50%;
}

.c41 {
  border-left: 5px solid #3a86ff;
}

.c42 {
  border-right: 5px solid #ff006e;
}

.c43 {
  border-top: 5px solid #fb5607;
}

.c44 {
  border-bottom: 5px solid #80ffdb;
}

/* ==== Animation 5 ====  */
.circle5 {
  position: absolute;
  animation: color5 1s linear infinite, rotate 2.5s linear infinite;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

@keyframes color5 {
  0% {
    border: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  25% {
    border: 5px solid #ffd166;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  50% {
    border: 5px solid #06d6a0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  75% {
    border: 5px solid #118ab2;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  100% {
    border: 5px solid #fb5607;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
}

/* ==== Animation 6 ==== */

.circle6 {
  position: absolute;
  border-radius: 50%;
}

.c61 {
  border-left: 15px solid #3a86ff;
  background: #000;
  border-right: 15px solid #000;
  border-top: 15px solid #000;
  border-bottom: 15px solid #000;
}

.c62 {
  border-right: 15px solid #ff006e;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
}

.c63 {
  border-right: 15px solid transparent;
  border-top: 15px solid #fb5607;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
}

.c64 {
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid transparent;
  border-bottom: 15px solid #80ffdb;
}

.c65 {
  position: absolute;
  animation: colorUp 2s ease infinite;
}

@keyframes colorUp {
  0% {
    width: 0px;
    height: 0px;
    background: #fff;
  }
  15% {
    width: 50px;
    height: 50px;
    background: #ff006e;
  }
  25% {
    width: 0px;
    height: 0px;
    background: #fff;
  }
  40% {
    width: 50px;
    height: 50px;
    background: #fb5607;
  }
  50% {
    width: 0px;
    height: 0px;
    background: #fff;
  }
  65% {
    width: 50px;
    height: 50px;
    background: #80ffdb;
  }
  75% {
    width: 0px;
    height: 0px;
    background: #fff;
  }
  90% {
    width: 50px;
    height: 50px;
    background: #3a86ff;
  }
}

/* ==== Animation 7 ==== */
.circle7 {
  position: absolute;
  border-radius: 50%;
}

.c71 {
  border: 5px solid #3a86ff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.c72 {
  width: 80px;
  height: 80px;
  border: 5px solid #ff006e;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.c73 {
  width: 60px;
  height: 60px;
  border: 5px solid #fb5607;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.c74 {
  width: 40px;
  height: 40px;
  border: 5px solid #80ffdb;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.c75 {
  width: 20px;
  height: 20px;
  border: 5px solid #ffbe0b;
}

/* ==== Animation 8 ==== */
.circle8 {
  position: absolute;
  border-radius: 50%;
}

.c81 {
  border: 5px solid #3a86ff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  animation: 2s ease rotate2 infinite;
}

.c82 {
  width: 80px;
  height: 80px;
  border: 5px solid #ff006e;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  animation: 2s 200ms ease rotate2 infinite;
}

.c83 {
  width: 60px;
  height: 60px;
  border: 5px solid #fb5607;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  animation: 2s 500ms ease rotate2 infinite;
}

.c84 {
  width: 40px;
  height: 40px;
  border: 5px solid #80ffdb;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  animation: 2s 1s ease rotate2 infinite;
}

.c85 {
  width: 20px;
  height: 20px;
  border: 5px solid #ffbe0b;
}

@keyframes rotate2 {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg);
  }
}

/* ==== Animation 9 ==== */
.circle9 {
  position: absolute;
  border-radius: 50%;
}

.c91 {
  border: 5px solid #3a86ff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.c92 {
  width: 80px;
  height: 80px;
  border: 5px solid #ff006e;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  animation: rotate2 2.5s linear infinite;
}

.c93 {
  width: 60px;
  height: 60px;
  border: 5px solid #fb5607;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.c94 {
  width: 40px;
  height: 40px;
  border: 5px solid #80ffdb;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  animation: rotate2 2.5s linear infinite;
}

.c95 {
  width: 20px;
  height: 20px;
  background: #ffbe0b;
}

@keyframes rotate2 {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg);
  }
}

/* ==== Animation 10 ==== */
.circle10 {
  position: absolute;
  border-radius: 50%;
  border: 5px solid transparent;
  border-left: 5px solid #3a86ff;
}

.c102 {
  width: 80px;
  height: 80px;
  border-left: 5px solid #ff006e;
}

.c103 {
  width: 60px;
  height: 60px;
  border-left: 5px solid #fb5607;
}

.c104 {
  width: 40px;
  height: 40px;
  border-left: 5px solid #80ffdb;
}

.c105 {
  width: 20px;
  height: 20px;
  border-left: 5px solid #ffbe0b;
}

/* ==== Animation 11 ==== */
.circle11 {
  position: absolute;
  border-radius: 50%;
  animation-direction: reverse;
  border: 5px solid #3a86ff;
  border-left: 5px solid transparent;
}

.c112 {
  width: 80px;
  height: 80px;
  border: 5px solid #ff006e;
  border-left: 5px solid transparent;
}

.c113 {
  width: 60px;
  height: 60px;
  border: 5px solid #fb5607;
  border-left: 5px solid transparent;
}

.c114 {
  width: 40px;
  height: 40px;
  border: 5px solid #80ffdb;
  border-left: 5px solid transparent;
}

.c115 {
  width: 20px;
  height: 20px;
  border: 5px solid #ffbe0b;
  border-left: 5px solid transparent;
}

/* ==== Animation 12 ==== */
.circle12 {
  position: absolute;
  border-radius: 50%;
}

.c121 {
  border: 5px solid #3a86ff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.c122 {
  width: 80px;
  height: 80px;
  border: 5px solid #ff006e;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.c123 {
  width: 60px;
  height: 60px;
  border: 5px solid #fb5607;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.c124 {
  width: 40px;
  height: 40px;
  border: 5px solid #80ffdb;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.c125 {
  width: 20px;
  height: 20px;
  background: #ffbe0b;
}

/* ==== Animation 12 ==== */
.circle12 {
  position: absolute;
  border-radius: 50%;
}

.c121 {
  border: 5px solid #3a86ff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.c122 {
  width: 80px;
  height: 80px;
  border: 5px solid #ff006e;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.c123 {
  width: 60px;
  height: 60px;
  border: 5px solid #fb5607;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

.c124 {
  width: 40px;
  height: 40px;
  border: 5px solid #80ffdb;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.c125 {
  width: 20px;
  height: 20px;
  background: #ffbe0b;
}

/* ==== Animation 13 ==== */
.circle13 {
  position: absolute;
  border-radius: 50%;
  animation: fillUp 500ms cubic-bezier(0, 1.18, 1, -0.23) infinite alternate,
    rotateFast 1s linear infinite;
}

.c131 {
  border-top: 5px solid #ffbe0b;
}

@keyframes fillUp {
  0% {
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
  }
  25% {
    border-bottom: 10px solid #ffbe0b;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
  }
  50% {
    border-bottom: 10px solid #ffbe0b;
    border-left: 10px solid #fb5607;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
  }
  75% {
    border-bottom: 10px solid #ffbe0b;
    border-left: 10px solid #fb5607;
    border-top: 10px solid #ff006e;
    border-right: 10px solid transparent;
  }
  100% {
    border-bottom: 10px solid #ffbe0b;
    border-left: 10px solid #fb5607;
    border-top: 10px solid #ff006e;
    border-right: 10px solid #00f5d4;
  }
}

@keyframes rotateFast {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ==== Animation 14 ==== */
.wrapper {
  position: relative;
}

.circle14 {
  margin: 50px auto;
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(
    to right,
    #ffbe0b 10%,
    rgba(255, 255, 255, 0) 42%
  );
  animation: effect14 1.4s infinite linear;
  transform: translateZ(0);
}

.circle14:before,
.circle14:after {
  width: 50%;
  height: 50%;
  content: "";
  background: #ffbe0b;
  border-radius: 100% 0 0 0;
  position: absolute;
}

.circle14:before {
  top: 0;
  left: 0;
}

.circle14:after {
  background: #000;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  margin: auto;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
}

@keyframes effect14 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* ==== Animation 15 ==== */

.circle15 {
  position: relative;
  width: 100px;
  height: 100px;
  transform: translateZ(0);
  border-radius: 50%;
  box-shadow: inset 0 0 0 25px #ff006e;
}

.circle15:before,
.circle15:after {
  position: absolute;
  border-radius: 50%;
  content: "";
  width: 50%;
  height: 100%;
}
.circle15:before {
  top: 0;
  left: 0;
  background: #000;
  border-radius: 100px 0 0 100px;
  transform-origin: center right;
  animation: effect15 2s infinite ease 1.5s;
}
.circle15:after {
  top: 0;
  right: 0;
  background: #000;
  border-radius: 0 100px 100px 0;
  transform-origin: center left;
  animation: effect15 2s infinite ease;
}

@keyframes effect15 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

This Pen is owned by kiran raj r on CodePen.

See more by @kiran-r-raj on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.