.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading__inner {
  position: relative;
  height: 170px;
  width: 170px;
}

.loading__icon  {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  background: #000;
  border-radius: 50%;
  width: 70%;
  height: 70%;
}

.loading__icon svg {
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
  z-index: 2;
}

.loading__circle {
  animation: rotateCircle 2s linear 0s infinite ;
}

@keyframes rotateCircle {
  0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
  50% { transform: rotate(180deg) scale(0.8); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.5; }
}

.loadingTextPath  {
  animation: textPulse 3.5s linear 0s infinite;
}

.st4 {
  animation-delay: 0s;
}

.st5 {
  animation-delay: 0.5s;
}

.st6 {
  animation-delay: 1s;
}

.st7 {
  animation-delay: 1.5s;
}

.st8 {
  animation-delay: 2s;
}

.st9 {
  animation-delay: 2.5s;
}

.st10 {
  animation-delay: 3s;
}

@keyframes textPulse {
  0% { opacity: 1; }
  5% { opacity: 0.5; }
  10% { opacity: 1; }
  100% { opacity: 1; }
}