Scientific loading animation

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

Based on this Dribbble: https://dribbble.com/shots/1952320-Wait-for-it-SCIENCE?list=following&offset=0

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

<head>
  <meta charset="UTF-8">
  <title>Scientific loading animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Scientific loading animation<small>Inspired by <a href="https://dribbble.com/shots/1952320-Wait-for-it-SCIENCE?list=following&offset=0" target="_blank">this Dribbble</a> from haydenslc</small></h1>

<ul class="loader">
  <li class="circle orange"></li>
  <li class="circle blue"></li>
  <li class="circle green"></li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/scientific-loading-animation-ByVOaq */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
h1 {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  border-bottom: 1px solid #9a9a9a;
  margin: 0 auto;
  padding: 15px 0;
  width: 60%;
  color: #3a3a3a;
}
h1 small {
  display: block;
  margin: 10px 0 0;
  font-size: 0.5em;
}

ul.loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  padding: 0;
  list-style-type: none;
}
ul.loader li.circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 2px solid #000000;
  -webkit-animation: 2s ease-in infinite;
          animation: 2s ease-in infinite;
}
ul.loader li.circle.orange {
  border-color: #FFA500;
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
  -webkit-animation-name: rotateOrange;
          animation-name: rotateOrange;
}
ul.loader li.circle.blue {
  border-color: #1BA8DB;
  -webkit-animation-name: rotateBlue;
          animation-name: rotateBlue;
}
ul.loader li.circle.green {
  border-color: #4FC3A0;
  -webkit-animation-name: rotateGreen;
          animation-name: rotateGreen;
}

@-webkit-keyframes rotateOrange {
  0% {
    -webkit-transform: rotateZ(-45deg) rotateY(0deg);
            transform: rotateZ(-45deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-45deg) rotateY(360deg);
            transform: rotateZ(-45deg) rotateY(360deg);
  }
}

@keyframes rotateOrange {
  0% {
    -webkit-transform: rotateZ(-45deg) rotateY(0deg);
            transform: rotateZ(-45deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-45deg) rotateY(360deg);
            transform: rotateZ(-45deg) rotateY(360deg);
  }
}
@-webkit-keyframes rotateBlue {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotateBlue {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotateGreen {
  0% {
    -webkit-transform: rotateZ(45deg) rotateY(0deg);
            transform: rotateZ(45deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateZ(45deg) rotateY(360deg);
            transform: rotateZ(45deg) rotateY(360deg);
  }
}
@keyframes rotateGreen {
  0% {
    -webkit-transform: rotateZ(45deg) rotateY(0deg);
            transform: rotateZ(45deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateZ(45deg) rotateY(360deg);
            transform: rotateZ(45deg) rotateY(360deg);
  }
}

Comments