#loading-dynamic {
  @offset: 187;
  @duration: 1.4s;
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  .spinner {
    height: 40px;
    width: 40px;
    animation: circle-rotator @duration linear infinite;
    * {
      line-height: 0;
      box-sizing: border-box;
    }
  }

  @keyframes circle-rotator {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(270deg);
    }
  }

  .path {
    stroke-dasharray: @offset;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: circle-dash @duration ease-in-out infinite,
    circle-colors (@duration*4) ease-in-out infinite;
  }

  @keyframes circle-colors {
    0% {
      stroke: #35495e;
    }
    25% {
      stroke: #DE3E35;
    }
    50% {
      stroke: #F7C223;
    }
    75% {
      stroke: #41b883;
    }
    100% {
      stroke: #35495e;
    }
  }

  @keyframes circle-dash {
    0% {
      stroke-dashoffset: @offset;
    }
    50% {
      stroke-dashoffset: @offset/4;
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: @offset;
      transform: rotate(450deg);
    }
  }
}
#loading-dynamic.show {
  display: flex;
}