Pure CSS Circle Loader

CodePen Home Pure CSS Circle Loader - Nobuaki Honma

by Good Muyis

HTML

<div class="wrapper">
    <header class="header">
      <h1>Pure CSS Circle Loader</h1>
      <p>by <a href="https://twitter.com/RBV912" title="Nobuaki Honma" target="_blank">Nobuaki Honma (@RBV912)</a></p>
    </header>
    <ul class="loader-list">
      <li>
        <!-- Loader 1-->
        <div class="loader-1 center"><span></span></div>
        Loiading...
      </li>
      <li>
        <!-- Loader 2 -->
        <div class="loader-2 center"><span></span></div>
      </li>
      <li>
        <!-- Loader 3 -->
        <div class="loader-3 center"><span></span></div>
      </li>
      <li>
        <!-- Loader 4 -->
        <div class="loader-4 center"><span></span></div>
      </li>
      <li>
        <!-- Loader 5 -->
        <div class="loader-5 center"><span></span></div>
      </li>
      <li>
        <!-- Loader 6 -->
        <div class="loader-6 center"><span></span></div>
      </li>
    </ul>
</div>

CSS

*, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; height: 100%; font-size: 62.5%; }
body { width: 100%; height: 100%; background: #3530F0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


/* Loader 1 */
.loader-1 {
	height: 32px;
	width: 32px;
	-webkit-animation: loader-1-1 4.8s linear infinite;
	        animation: loader-1-1 4.8s linear infinite;
}
@-webkit-keyframes loader-1-1 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-1-1 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loader-1 span {
	display: block;
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	margin: auto;
	height: 32px;
	width: 32px;
	clip: rect(0, 32px, 32px, 16px);
	-webkit-animation: loader-1-2 1.2s linear infinite;
	        animation: loader-1-2 1.2s linear infinite;
}
@-webkit-keyframes loader-1-2 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(220deg); }
}
@keyframes loader-1-2 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(220deg); }
}
.loader-1 span::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	margin: auto;
	height: 32px;
	width: 32px;
	clip: rect(0, 32px, 32px, 16px);
	border: 3px solid #FFF;
	border-radius: 50%;
	-webkit-animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	        animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-1-3 {
	0%   { -webkit-transform: rotate(-140deg); }
	50%  { -webkit-transform: rotate(-160deg); }
	100% { -webkit-transform: rotate(140deg); }
}
@keyframes loader-1-3 {
	0%   { transform: rotate(-140deg); }
	50%  { transform: rotate(-160deg); }
	100% { transform: rotate(140deg); }
}

/* Loader 2 */
.loader-2 {
  display: block;
	height: 32px;
	width: 32px;
	-webkit-animation: loader-2-1 3s linear infinite;
	       ...