.loader {
  width: 30px;
  height: 30px;
  position: relative;
  margin: auto;
}
.loader::before, .loader::after {
  content: "";
  position: absolute;
}
.loader-list {
  display: grid;
  grid-template: repeat(3, 120px)/repeat(3, 120px);
  grid-gap: 30px;
}
.loader-item {
  margin: 20px 0;
  display: flex;
  background: rgba(0, 0, 0, 0.05);
}

.loader-1::before, .loader-1::after {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-1::before {
  border-style: solid;
  border-width: 3px 3px 3px 0;
  border-color: #fff transparent transparent;
  -webkit-transform: scale(0.3) rotate(0deg);
          transform: scale(0.3) rotate(0deg);
  opacity: 0.5;
  -webkit-animation-name: foregroundCircle;
          animation-name: foregroundCircle;
}
.loader-1::after {
  background: #fff;
  opacity: 0.5;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation-name: backgroundCircle;
          animation-name: backgroundCircle;
}

@-webkit-keyframes foregroundCircle {
  0% {
    -webkit-transform: scale(0.3) rotate(0deg);
            transform: scale(0.3) rotate(0deg);
  }
  12.5% {
    -webkit-transform: scale(0.3) rotate(180deg);
            transform: scale(0.3) rotate(180deg);
  }
  25%, 50% {
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1) rotate(720deg);
            transform: scale(1) rotate(720deg);
  }
  100% {
    -webkit-transform: scale(0.3) rotate(1800deg);
            transform: scale(0.3) rotate(1800deg);
    opacity: 0.5;
  }
}

@keyframes foregroundCircle {
  0% {
    -webkit-transform: scale(0.3) rotate(0deg);
            transform: scale(0.3) rotate(0deg);
  }
  12.5% {
    -webkit-transform: scale(0.3) rotate(180deg);
            transform: scale(0.3) rotate(180deg);
  }
  25%, 50% {
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1) rotate(720deg);
            transform: scale(1) rotate(720deg);
  }
  100% {
    -webkit-transform: scale(0.3) rotate(1800deg);
            transform: scale(0.3) rotate(1800deg);
    opacity: 0.5;
  }
}
@-webkit-keyframes backgroundCircle {
  12.5% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  90%, 100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}
@keyframes backgroundCircle {
  12.5% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  90%, 100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}
.loader-2 {
  -webkit-perspective: 500px;
          perspective: 500px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotate3d(2, 1, -1, 90deg);
          transform: rotate3d(2, 1, -1, 90deg);
}
.loader-2::before, .loader-2::after {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  background: #fff;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-2::before {
  left: 0;
  opacity: 0.7;
  border-top-right-radius: 0;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-animation-name: flapL;
          animation-name: flapL;
}
.loader-2::after {
  left: 50%;
  opacity: 0.5;
  border-top-left-radius: 0;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-animation-name: flapR;
          animation-name: flapR;
}

@-webkit-keyframes flapL {
  25%, 50% {
    -webkit-transform: rotateY(-45deg);
            transform: rotateY(-45deg);
  }
  12.5%, 37.5%, 65% {
    -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
  }
  0%, 100% {
    -webkit-transform: rotateY(-30deg);
            transform: rotateY(-30deg);
  }
}

@keyframes flapL {
  25%, 50% {
    -webkit-transform: rotateY(-45deg);
            transform: rotateY(-45deg);
  }
  12.5%, 37.5%, 65% {
    -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
  }
  0%, 100% {
    -webkit-transform: rotateY(-30deg);
            transform: rotateY(-30deg);
  }
}
@-webkit-keyframes flapR {
  25%, 50% {
    -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
  }
  12.5%, 37.5%, 65% {
    -webkit-transform: rotateY(-45deg);
            transform: rotateY(-45deg);
  }
  0%, 100% {
    -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
  }
}
@keyframes flapR {
  25%, 50% {
    -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
  }
  12.5%, 37.5%, 65% {
    -webkit-transform: rotateY(-45deg);
            transform: rotateY(-45deg);
  }
  0%, 100% {
    -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
  }
}
.loader-3::before, .loader-3::after {
  border-radius: 50%;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-3::before {
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 2px #fff;
  background: radial-gradient(transparent 0, transparent 3px, #fff 3px);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation-name: mapPin;
          animation-name: mapPin;
}
.loader-3::after {
  width: 4px;
  height: 2px;
  opacity: 0.8;
  top: 100%;
  left: calc(50% - 2px);
  background: #fff;
  -webkit-animation-name: mapPinShadow;
          animation-name: mapPinShadow;
}

@-webkit-keyframes mapPin {
  50% {
    -webkit-transform: rotate(45deg) translate(-50%, -50%);
            transform: rotate(45deg) translate(-50%, -50%);
  }
}

@keyframes mapPin {
  50% {
    -webkit-transform: rotate(45deg) translate(-50%, -50%);
            transform: rotate(45deg) translate(-50%, -50%);
  }
}
@-webkit-keyframes mapPinShadow {
  50% {
    -webkit-transform: scaleX(3);
            transform: scaleX(3);
    opacity: 0.2;
  }
}
@keyframes mapPinShadow {
  50% {
    -webkit-transform: scaleX(3);
            transform: scaleX(3);
    opacity: 0.2;
  }
}
.loader-4::before, .loader-4::after {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  top: calc(50% - 4px);
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-4::before {
  left: 0;
  -webkit-animation-name: firstDot;
          animation-name: firstDot;
}
.loader-4::after {
  right: 0;
  opacity: 0.8;
  -webkit-animation-name: secondDot;
          animation-name: secondDot;
}

@-webkit-keyframes firstDot {
  0%, 50% {
    -webkit-transform-origin: 15px center;
            transform-origin: 15px center;
  }
  50% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  51%, 100% {
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  51% {
    -webkit-transform: rotateZ(180deg) translateX(-22px);
            transform: rotateZ(180deg) translateX(-22px);
  }
  100% {
    -webkit-transform: rotateZ(180deg) translateX(0);
            transform: rotateZ(180deg) translateX(0);
  }
}

@keyframes firstDot {
  0%, 50% {
    -webkit-transform-origin: 15px center;
            transform-origin: 15px center;
  }
  50% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  51%, 100% {
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  51% {
    -webkit-transform: rotateZ(180deg) translateX(-22px);
            transform: rotateZ(180deg) translateX(-22px);
  }
  100% {
    -webkit-transform: rotateZ(180deg) translateX(0);
            transform: rotateZ(180deg) translateX(0);
  }
}
@-webkit-keyframes secondDot {
  0%, 50% {
    -webkit-transform: rotateZ(-180deg);
            transform: rotateZ(-180deg);
  }
  51%, 100% {
    -webkit-transform-origin: -8px center;
            transform-origin: -8px center;
  }
}
@keyframes secondDot {
  0%, 50% {
    -webkit-transform: rotateZ(-180deg);
            transform: rotateZ(-180deg);
  }
  51%, 100% {
    -webkit-transform-origin: -8px center;
            transform-origin: -8px center;
  }
}
.loader-5::before, .loader-5::after {
  border-radius: 50%;
  background: #fff;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-5::before {
  opacity: 0.7;
  -webkit-animation-name: upperDot;
          animation-name: upperDot;
}
.loader-5::after {
  opacity: 0.5;
  -webkit-animation-name: lowerDot;
          animation-name: lowerDot;
}

@-webkit-keyframes upperDot {
  25% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  47.5%, 52.5% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@keyframes upperDot {
  25% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  47.5%, 52.5% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}
@-webkit-keyframes lowerDot {
  25% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  47.5%, 52.5% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes lowerDot {
  25% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  47.5%, 52.5% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.loader-6 {
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  -webkit-animation-name: pacmanDot;
          animation-name: pacmanDot;
  -webkit-transform: translateX(14px);
          transform: translateX(14px);
}
.loader-6::before, .loader-6::after {
  border-radius: 50%;
  border: 14px solid #fff;
  border-right-color: transparent;
  top: -12px;
  left: -24px;
}
.loader-6, .loader-6::before, .loader-6::after {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-6::before {
  -webkit-animation-name: upperJaw;
          animation-name: upperJaw;
}
.loader-6::after {
  -webkit-animation-name: lowerJaw;
          animation-name: lowerJaw;
}

@-webkit-keyframes pacmanDot {
  0%, 50% {
    background: #fff;
  }
  51%, 100% {
    background: none;
  }
  0%, 100% {
    -webkit-transform: translateX(19px);
            transform: translateX(19px);
  }
  50% {
    -webkit-transform: translateX(14px);
            transform: translateX(14px);
  }
}

@keyframes pacmanDot {
  0%, 50% {
    background: #fff;
  }
  51%, 100% {
    background: none;
  }
  0%, 100% {
    -webkit-transform: translateX(19px);
            transform: translateX(19px);
  }
  50% {
    -webkit-transform: translateX(14px);
            transform: translateX(14px);
  }
}
@-webkit-keyframes upperJaw {
  50% {
    -webkit-transform: rotate(50deg) translate(2px, -2px);
            transform: rotate(50deg) translate(2px, -2px);
  }
}
@keyframes upperJaw {
  50% {
    -webkit-transform: rotate(50deg) translate(2px, -2px);
            transform: rotate(50deg) translate(2px, -2px);
  }
}
@-webkit-keyframes lowerJaw {
  50% {
    -webkit-transform: rotate(-50deg) translate(2px, 2px);
            transform: rotate(-50deg) translate(2px, 2px);
  }
}
@keyframes lowerJaw {
  50% {
    -webkit-transform: rotate(-50deg) translate(2px, 2px);
            transform: rotate(-50deg) translate(2px, 2px);
  }
}
.loader-7 {
  border: 1px solid #fff;
  height: 14px;
  width: 32px;
}
.loader-7::before {
  width: 4px;
  height: 10px;
  background: #fff;
  left: 1px;
  top: calc(50% - 5px);
  -webkit-animation: blockBar 2s infinite;
          animation: blockBar 2s infinite;
}

@-webkit-keyframes blockBar {
  0%, 80% {
    opacity: 1;
  }
  0%, 20% {
    box-shadow: 8px 0 0 0 rgba(255, 255, 255, 0), 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0);
  }
  21%, 40% {
    box-shadow: 8px 0 0 0 white, 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0);
  }
  41%, 60% {
    box-shadow: 8px 0 0 0 white, 16px 0 0 0 white, 24px 0 0 0 rgba(255, 255, 255, 0);
  }
  61%, 80% {
    box-shadow: 8px 0 0 0 white, 16px 0 0 0 white, 24px 0 0 0 white;
  }
  81%, 100% {
    opacity: 0;
  }
}

@keyframes blockBar {
  0%, 80% {
    opacity: 1;
  }
  0%, 20% {
    box-shadow: 8px 0 0 0 rgba(255, 255, 255, 0), 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0);
  }
  21%, 40% {
    box-shadow: 8px 0 0 0 white, 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0);
  }
  41%, 60% {
    box-shadow: 8px 0 0 0 white, 16px 0 0 0 white, 24px 0 0 0 rgba(255, 255, 255, 0);
  }
  61%, 80% {
    box-shadow: 8px 0 0 0 white, 16px 0 0 0 white, 24px 0 0 0 white;
  }
  81%, 100% {
    opacity: 0;
  }
}
.loader-8::before, .loader-8::after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loader-8::before {
  background: #fff;
  -webkit-animation-name: droplets;
          animation-name: droplets;
}
.loader-8::after {
  border: 1px solid #fff;
  opacity: 0;
  -webkit-animation-name: ripples;
          animation-name: ripples;
}

@-webkit-keyframes droplets {
  0%, 15% {
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  60% {
    -webkit-transform: scale(4);
            transform: scale(4);
  }
  60%, 90% {
    opacity: 0;
  }
  90% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  95%, 100% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes droplets {
  0%, 15% {
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  60% {
    -webkit-transform: scale(4);
            transform: scale(4);
  }
  60%, 90% {
    opacity: 0;
  }
  90% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  95%, 100% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes ripples {
  0%, 30% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 0.3;
  }
  90% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes ripples {
  0%, 30% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 0.3;
  }
  90% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  100% {
    opacity: 0;
  }
}
.loader-9 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  -webkit-animation: counterClockwise 4s linear infinite;
          animation: counterClockwise 4s linear infinite;
}
.loader-9::before, .loader-9::after {
  border-radius: 50%;
}
.loader-9::before {
  width: 8px;
  height: 8px;
  background: #fff;
  -webkit-animation: clockwise 4s linear infinite;
          animation: clockwise 4s linear infinite;
}
.loader-9::after {
  width: 4px;
  height: 4px;
  top: 8px;
  left: 8px;
  background: #fff;
  -webkit-transform-origin: -4px -4px;
          transform-origin: -4px -4px;
  -webkit-animation: counterClockwise 1s linear infinite;
          animation: counterClockwise 1s linear infinite;
}

@-webkit-keyframes clockwise {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes clockwise {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@-webkit-keyframes counterClockwise {
  to {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn);
  }
}
@keyframes counterClockwise {
  to {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn);
  }
}