.preloader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  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;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 50; }
  .preloader__icon {
    width: 60px;
    height: 60px; }
    .preloader__icon svg {
      width: 100%;
      height: 100%;
      fill: #0051ff; }
      .preloader__icon svg path {
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite; }
        .preloader__icon svg path:nth-child(1) {
          -webkit-animation-name: rotate360;
          animation-name: rotate360;
          -webkit-animation-duration: 2s;
          animation-duration: 2s; }
        .preloader__icon svg path:nth-child(2) {
          -webkit-animation-name: rotate360Reverse;
          animation-name: rotate360Reverse;
          -webkit-animation-duration: 1s;
          animation-duration: 1s; }
        .preloader__icon svg path:nth-child(3) {
          -webkit-animation-name: rotate360;
          animation-name: rotate360;
          -webkit-animation-duration: 2s;
          animation-duration: 2s; }

@-webkit-keyframes rotate360 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rotate360 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes rotate360Reverse {
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

@keyframes rotate360Reverse {
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }