.gra-progress-bar {
  &.gra-loading {
    .gra-progress-bar-value {
      width: 38%;
      animation-duration: 1.4s;
      animation-iteration-count: infinite;
      animation-name: progress-bar;
    }
  }
}

@keyframes progress-bar {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(265%);
  }
}

.gra-progress-circle {
  &.gra-loading {
    display: flex;
    width: 100%;
    justify-content: center;

    .gra-progress-circle-back {
      fill: none;
    }

    .gra-progress-circle-value {
      stroke: $color-light;
      @include moder($modes) {
        stroke: mode("colorLoadings");
      }
    }

    &.gra-circle-turn-pieces {
      .gra-progress-circle-value {
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-name: circle-turn-pieces;
        animation-timing-function: cubic-bezier(0.27, 0.82, 0.83, 0.67);
        stroke-dasharray: 52;
      }
    }

    &.gra-circle-turn {
      .gra-progress-circle-value {
        animation-duration: 1.2s;
        animation-iteration-count: infinite;
        animation-name: circle-turn;
        animation-timing-function: linear;
        stroke-dasharray: 170;
      }
    }
  }
}

@keyframes circle-turn {
  0% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(630deg);
  }
}

@keyframes circle-turn-pieces {
  0% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(810deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

.gra-loading {
  &-dots {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  &-dot {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-name: progress-dot;
    animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
    background: $color-light;
    border-radius: $border-radius;
    margin-inline: 2px;
    @include moder($modes) {
      background: mode("colorLoadings");
    }

    &.dot-1 {
      animation-delay: 0s;
    }

    &.dot-2 {
      animation-delay: 0.1s;
    }

    &.dot-3 {
      animation-delay: 0.2s;
    }
  }
}

@keyframes progress-dot {
  0% {
    transform: scale(0.4);
  }

  30% {
    transform: scale(1.2);
  }

  60% {
    transform: scale(0.4);
  }

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