<div class="loader">
  <div class="loader__container">
    <div class="loader__item"></div>
    <div class="loader__item loader__item_copy"></div>
  </div>
  <div class="loader__triangle loader__triangle_up"></div>
  <div class="loader__triangle loader__triangle_down"></div>
</div>

:root {
  --bg-color: #172434;
  --bg-dots: #fff;
  --green: #5fc975;
  --red: #ee5130;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background-color: var(--bg-color);
}

.loader {
  position: relative;
  width: 6em;
  height: 6em;
  background-color: var(--bg-color);

  &__container {
    width: 100%;
    height: 100%;
    transform: scale(0);
    animation: rotate 2.5s ease infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }

  &__item {
    width: 2em;
    height: 2em;
    border-radius: 100%;
    background: none;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    &::before {
      width: 2em;
      height: 2em;
      background: var(--bg-dots);
      border-radius: 100%;
      display: inline-block;
      content: "";
      position: absolute;
      left: -2em;
    }

    &::after {
      width: 2em;
      height: 2em;
      background: var(--bg-dots);
      border-radius: 100%;
      display: inline-block;
      content: "";
      position: absolute;
      left: 2em;
    }

    &_copy {
      top: 4em;
    }
  }

  &__triangle {
    position: absolute;
    transform: translateY(-50%);
    top: 33%;
    left: 0;
    margin: 0 auto;
    width: 60px;
    height: 30px;
    border-left: solid 30px transparent;
    border-right: solid 30px transparent;
    right: 0;
    will-change: transform;
    transform-origin: 50% 50%;

    &_up {
      border-bottom: solid 30px var(--green);
      z-index: 2;
      animation: hideSlideUp 5s ease-out infinite forwards,
        iconScale 2.5s ease-out infinite;

      &::before {
        content: "";
        position: absolute;
        width: 0;
        transform: scale(1);
        opacity: 0.6;
        left: -30px;
        top: 0;
        height: 0;
        border-style: solid;
        border-width: 0 30px 30px 30px;
        border-color: transparent transparent var(--green) transparent;
        animation: iconScaleShadow 2.5s ease-out infinite;
      }
    }

    &_down {
      border-top: solid 30px var(--red);
      z-index: 2;
      animation: hideSlideDown 5s ease-out infinite forwards,
        iconScale 2.5s ease-out infinite;

      &::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        transform: scale(1);
        opacity: 0.6;
        left: -30px;
        top: -30px;
        border-style: solid;
        border-width: 30px 30px 0 30px;
        border-color: var(--red) transparent transparent transparent;
        animation: iconScaleShadow 2.5s ease-out infinite;
      }
    }
  }
}

@keyframes hideSlideDown {
  0%,
  50% {
    visibility: hidden;
  }
}

@keyframes hideSlideUp {
  50%,
  100% {
    visibility: hidden;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(0);
  }

  10% {
    transform: rotate(0deg) scale(1);
  }

  40% {
    transform: rotate(180deg) scale(1);
  }

  56% {
    transform: rotate(180deg) scale(1);
  }

  60% {
    transform: rotate(180deg) scale(0);
  }

  90% {
    transform: rotate(180deg) scale(0);
  }

  100% {
    transform: rotate(180deg) scale(0);
  }
}

@keyframes iconScale {
  0% {
    transform: scale(0);
  }

  10% {
    transform: scale(0);
  }

  40% {
    transform: scale(0);
  }

  56% {
    transform: scale(0);
  }

  66% {
    transform: scale(1);
  }

  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes iconScaleShadow {
  66% {
    transform: scale(1.6);
    opacity: 0.2;
  }

  90% {
    transform: scale(1.7);
    opacity: 0;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}