CSS loading animation 12

css-loading-animation-12.markdown

CSS loading animation 12

CSS loading spinner

A Pen by Simon on CodePen.

License.

index.html

<div class="loader">
  <div class="inner one"></div>
  <div class="inner two"></div>
  <div class="inner three"></div>
 <!-- <div class="sun"> <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iNTEyLjAwMDAwMHB0IiBoZWlnaHQ9IjUxMi4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDUxMi4wMDAwMDAgNTEyLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTEyLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0ib3JhbmdlIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNMjMzNiA0NzcwIGMtMTE5IC0xODcgLTIxOSAtMzQ3IC0yMjIgLTM1NSAtNSAtMTMgNTAgLTE1IDQ0NiAtMTUKMzk2IDAgNDUxIDIgNDQ2IDE1IC0xMCAyNyAtNDM5IDY5NSAtNDQ2IDY5NSAtNCAwIC0xMDQgLTE1MyAtMjI0IC0zNDB6Ii8+CjxwYXRoIGQ9Ik03NTUgNDM0OCBjMyAtMTMgNDQgLTE5OCA5MSAtNDEzIDQ3IC0yMTQgODcgLTM5MSA4OCAtMzkyIDEgLTEgMTQ3CjE0MyAzMjUgMzIxIGwzMjQgMzI0IC0zNCA3IGMtNDQgOSAtNzQ3IDE2MyAtNzc3IDE3MCAtMTkgNSAtMjIgMiAtMTcgLTE3eiIvPgo8cGF0aCBkPSJNNDAwNSA0MjkwIGMtMTkyIC00MiAtMzc3IC04MyAtNDA5IC05MCBsLTU5IC0xMiAzMjQgLTMyNCBjMTc4IC0xNzgKMzI0IC0zMjIgMzI1IC0zMjEgMSAxIDQxIDE3OCA4OCAzOTIgNDcgMjE1IDg4IDQwMCA5MSA0MTMgMyAxMiAyIDIyIC0yIDIxIC01CjAgLTE2NSAtMzYgLTM1OCAtNzl6Ii8+CjxwYXRoIGQ9Ik0yMzc3IDQxNzkgYy0xMTQgLTEzIC0yMjYgLTM4IC0zMzYgLTc2IC05MzYgLTMxNyAtMTM3OCAtMTM4MSAtOTQxCi0yMjY0IDM2MiAtNzMyIDEyMDggLTEwODMgMTk3OSAtODIyIDkzNSAzMTYgMTM3OCAxMzgxIDk0MSAyMjY0IC0zMDQgNjE0Ci05NjcgOTc3IC0xNjQzIDg5OHoiLz4KPHBhdGggZD0iTTM2MCAyNzkwIGMtMTkwIC0xMjEgLTM0NSAtMjI1IC0zNDUgLTIzMCAwIC0xMCA2ODIgLTQ1MCA2OTcgLTQ1MCA1CjAgOCAyMDMgOCA0NTAgMCAyNDggLTMgNDUwIC04IDQ1MCAtNCAwIC0xNjIgLTk5IC0zNTIgLTIyMHoiLz4KPHBhdGggZD0iTTQ0MDAgMjU2MCBjMCAtMzk2IDIgLTQ1MSAxNSAtNDQ2IDI3IDEwIDY5NSA0MzkgNjk1IDQ0NiAwIDcgLTY2OAo0MzYgLTY5NSA0NDYgLTEzIDUgLTE1IC01MCAtMTUgLTQ0NnoiLz4KPHBhdGggZD0iTTkyMCAxNTI0IGMtNyAtMzIgLTQ4IC0yMTkgLTkxIC00MTQgLTQzIC0xOTUgLTc3IC0zNTUgLTc2IC0zNTcgMgotMiA3OTQgMTcxIDgxNyAxNzkgNSAxIC0xMzYgMTQ5IC0zMTQgMzI3IGwtMzI0IDMyNCAtMTIgLTU5eiIvPgo8cGF0aCBkPSJNMzg2MSAxMjU2IGwtMzI0IC0zMjQgNTkgLTEyIGMzMiAtNyAyMTkgLTQ4IDQxNCAtOTEgMTk1IC00MyAzNTUKLTc3IDM1NyAtNzYgMiAyIC0xNzEgNzk0IC0xNzkgODE3IC0xIDUgLTE0OSAtMTM2IC0zMjcgLTMxNHoiLz4KPHBhdGggZD0iTTIxMTQgNzA1IGMxMCAtMjcgNDM5IC02OTUgNDQ2IC02OTUgNyAwIDQzNiA2NjggNDQ2IDY5NSA1IDEzIC01MAoxNSAtNDQ2IDE1IC0zOTYgMCAtNDUxIC0yIC00NDYgLTE1eiIvPgo8L2c+Cjwvc3ZnPg==" width="14px" style="margin-top: 25px; margin-left: 25px;" /> </div> -->
</div>

style.css

html {
  height: 100%;
}

body {
  background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, white 100%);
}

.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 80%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 0.75s linear infinite;
  border-bottom: 4px solid orange;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 0.75s linear infinite;
  border-right: 4px solid orange;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 0.75s linear infinite;
  border-top: 4px solid orange;
}

.sun {
  animation: rotate-sun 2s linear infinite;
}

@keyframes rotate-sun {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  }
}

@keyframes rotate-one {
  0% {
    transform: rotateX(120deg) rotateY(22deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(120deg) rotateY(22deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(60deg) rotateY(-22deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(60deg) rotateY(-22deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(180deg) rotateY(120deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(180deg) rotateY(120deg) rotateZ(360deg);
  }
}