CSS Spinners

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

Found on CoDrops and adapted to preferences

Thumbnail
This awesome code was written by AlxNzx, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AlxNzx ©
  • HTML
  • CSS
  • JavaScript
    <div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<div class="spinner2">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

<div class="spinner3"></div>

<div class="spinner4">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>

/*Downloaded from https://www.codeseek.co/AlxNzx/css-spinners-DjtfH */
    $background-color:#eee;
$foreground-color:#b84;

html {
  background-color: #000;
}

.spinner, .spinner2, .spinner3, .spinner4 {
  display: inline-block;
  margin: 100px 30px 0;
  width: 100px;
  height: 30px;
  text-align: center;
}
.spinner > div {
  width: 30px;
  height: 30px;
  background-color:$background-color;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0); background-color:$background-color; }
  40% { -webkit-transform: scale(1.0); background-color:$foreground-color; }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    background-color:$background-color;
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    background-color:$foreground-color;
  }
}


.spinner2 > div {
  background-color:$background-color;
  height: 100%;
  width: 16px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner2 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner2 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner2 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner2 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4); background-color:$background-color; }  
  20% { -webkit-transform: scaleY(1.0); background-color:$foreground-color; }
}
@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
    background-color:$background-color;
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
    background-color:$foreground-color;
  }
}


.spinner3 {
  background-color:$background-color;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color:$background-color; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color:$foreground-color; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); background-color:$background-color; }
}
@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    background-color:$background-color;
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    background-color:$foreground-color;
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    background-color:$background-color;
  }
}


.spinner4 {
  position: relative;
}
.cube1, .cube2 {
  background-color:$background-color;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}
.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(86px) rotate(-90deg) scale(0.5); background-color:$foreground-color; }
  50% { -webkit-transform: translateX(86px) translateY(16px) rotate(-180deg); background-color:$background-color; }
  75% { -webkit-transform: translateX(0px) translateY(16px) rotate(-270deg) scale(0.5); background-color:$foreground-color; }
  100% { -webkit-transform: rotate(-360deg); background-color:$background-color; }
}
@keyframes cubemove {
  25% { 
    transform: translateX(86px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(86px) rotate(-90deg) scale(0.5);
    background-color:$foreground-color;
  } 50% { 
    transform: translateX(86px) translateY(16px) rotate(-179deg);
    -webkit-transform: translateX(86px) translateY(16px) rotate(-179deg);
    background-color:$background-color;
  } 50.1% { 
    transform: translateX(86px) translateY(16px) rotate(-180deg);
    -webkit-transform: translateX(86px) translateY(16px) rotate(-180deg);
    background-color:$background-color;
  } 75% { 
    transform: translateX(0px) translateY(16px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(16px) rotate(-270deg) scale(0.5);
    background-color:$foreground-color;
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    background-color:$background-color;
  }
}


/*Downloaded from https://www.codeseek.co/AlxNzx/css-spinners-DjtfH */
    

Comments