.loading-box {
  // width: 200px;
  // height: 200px;
  position: relative;
  margin: 0 auto;

  .loading {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 100%;
    border: 4px solid transparent;
    border-color: transparent #333 transparent #333;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
  }

  .loading-text {
    width: calc(100% - 4px);
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-top: 40%;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
  }

  @keyframes rotate-loading {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }

  @keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
  }
}