<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Preloader</title>
</head>

<body>

  <div class="preloader">
    <div class="preloader__wrapper">
      <div class="preloader__spiner spin-1"></div>
      <div class="preloader__spiner spin-2"></div>
      <div class="preloader__spiner spin-3"></div>
      <div class="preloader__spiner spin-4"></div>
      
      <div class="preloader__spiner-mask"></div>
      <div class="preloader__dots">
        <span class="preloader__dot"></span>
      </div>
    </div>

  </div> <!-- preloader -->
</body>
</html>
_rotate(degrees)
  transform: s("rotate(%s)", degrees)
  
.spinner-body
  overflow: hidden;

#spinner-wrapper
  display: none;
  &.loading
    display: block;

.preloader
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: #515781;
  transform: translate3d(0,0,0);
  &__wrapper
    position relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100%;
    background-color: transparent;
    transform: translate3d(0,0,0);
    &:after
      background: #515781;
      content: '';
      width: 90px;
      height: 90px;
      margin: -45px 0 0 -45px;
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      border-radius: 50%;
      z-index: 11;
  &__spiner
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 50px;
    height: 50px;
    transform: translate3d(0,0,0);
    transform-origin: 100% 100%;
    &-mask
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 50px;
      height: 50px;
      background: #515781;
      transform-origin: 100% 100%;
      animation: spin-mask 2.5s infinite linear;
    &.spin-1
      background-color: #9eef01;
      animation: spin-1 2.5s infinite linear;
    &.spin-2
      background-color: #fdc202;
      animation: spin-2 2.5s infinite linear;
    &.spin-3
      background-color: #9eef01;
      animation: spin-3 2.5s infinite linear;
    &.spin-4
      background-color: #fdc202;
      animation: spin-4 2.5s infinite linear;
  &__dots
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 36px;
    height: 36px;
    z-index: 12;
    margin: -18px 0 0 -18px;
    background-color: transparent;
    animation: rotate 1s linear infinite;
  &__dot
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #fff;
    &:after,
    &:before
      content: '';
      position: absolute;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #fff;
    &:after
      top: -25px;
      right: 0;
      animation: down 1s linear infinite;
      -webkit-transform: translate3d(0,0,0);
    &:before
      right: -25px;
      bottom: 0px;


@keyframes rotate
  0%
    transform:rotate(0);
    -webkit-transform:rotate(0deg);
  100%,50%
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);

@keyframes down
  0%
    transform: translate3d(0,0,0);
  50%
    transform: translate3d(0,0,0) scaleX(1);
  75%
    transform: translate3d(0,0,0); scaleX(1.3);
  100% 
    transform: translate3d(25px,0,0) scaleX(1.3);

@keyframes spin-mask
  0%
    _rotate(0deg);
    z-index: 2;
  50%
    _rotate(90deg);
    z-index: 2;
  90%
    _rotate(90deg);
    z-index: 4;
  100%
    _rotate(90deg);
    z-index: 4;

@keyframes spin-1
  0%
    _rotate(0deg);
  15%
    z-index: 3;
  50%
    _rotate(1080deg);
    z-index: 3;
  70%
    _rotate(1080deg);
    z-index: 3;
  90%
    _rotate(1170deg);
  100%
    _rotate(1170deg);

@keyframes spin-2
  0%
    _rotate(0deg);
  15%
    z-index: 3;
  50%
    _rotate(990deg);
    z-index: 3;
  90%
    _rotate(1170deg);
    z-index: 3;
  100%
    _rotate(1170deg);

@keyframes spin-3
  0%
    _rotate(0deg);
  15%
    z-index: 3;
  50%
    _rotate(900deg);
    z-index: 3;
  90%
    _rotate(1170deg);
    z-index: 3;
  100%
    _rotate(1170deg);

@keyframes spin-4
  0%
    _rotate(0deg);
  15%
    z-index: 3;
  50%
    _rotate(810deg);
    z-index: 3;
  90%
    _rotate(1170deg);
    z-index: 3;
  100%
    _rotate(1170deg);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.