psn loader

by Andrey Izman

HTML

<div class="loading-screen">
  <!-- triangle -->
  <svg class="loading-indicator__triangle loading-indicator--shape-size-regular">
    <path class="loading-indicator--triangle-fill" d="M11.7 1L0 22 24 22 11.7 1ZM11.8 6.1L19.6 19.4 4.3 19.4 11.8 6.1Z"></path>
  </svg>

  <!-- circle -->
  <svg class="loading-indicator__circle loading-indicator--shape-size-regular">
    <path class="loading-indicator--circle-fill" d="M12 1C5.9 1 1 5.9 1 12 1 18.1 5.9 23 12 23 18.1 23 23 18.1 23 12 23 5.9 18.1 1 12 1ZM12 20.1C7.5 20.1
                   3.9 16.5 3.9 12 3.9 7.5 7.5 3.9 12 3.9 16.5 3.9 20.1 7.5 20.1 12 20.1 16.5 16.5 20.1 12 20.1Z"></path>
  </svg>

  <!-- cross -->
  <svg class="loading-indicator__cross loading-indicator--shape-size-regular">
    <path class="loading-indicator--cross-fill" d="M22 4.1L19.9 2 11.9 10 4.1 2.1 2 4.2 9.8 12 2.1 19.8 4.1 21.9
                   11.9 14.1 19.9 22 21.9 19.9 14 12 22 4.1"></path>
  </svg>

  <!-- square -->
  <svg class="loading-indicator__square loading-indicator--shape-size-regular">
    <path class="loading-indicator--square-fill" d="M2 22L22 22 22 2 2 2 2 22ZM4.7 4.7L19.3 4.7 19.3 19.3 4.7 19.3 4.7 4.7Z"></path>
  </svg>
</div>

CSS

@keyframes loading-animation {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-90deg) scale(.5);
    transform: rotateZ(-90deg) scale(.5);
  }

  30%, 70% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
    transform: rotateZ(0) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(90deg) scale(.5);
    transform: rotateZ(90deg) scale(.5);
  }
}
.loading-screen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: opacity .5s ease-in-out;
}

.loading-screen .loading-indicator--shape-size-regular {
  height: 24px;
  width: 24px;
}
.loading-screen .loading-indicator--circle-fill,
.loading-screen .loading-indicator--cross-fill,
.loading-screen .loading-indicator--square-fill,
.loading-screen .loading-indicator--triangle-fill {
  fill: #3caefb;
}

.loading-screen .loading-indicator__triangle {
  -webkit-animation: loading-animation 1s 0s infinite;
  animation: loading-animation 1s 0s infinite;
}
.loading-screen .loading-indicator__circle {
  -webkit-animation: loading-animation 1s .1s infinite;
  animation: loading-animation 1s .1s infinite;
}
.loading-screen .loading-indicator__cross {
  -webkit-animation: loading-animation 1s .2s infinite;
  animation: loading-animation 1s .2s infinite;
}
.loading-screen .loading-indicator__square {
  -webkit-animation: loading-animation 1s .3s infinite;
  animation: loading-animation 1s .3s infinite;
}