CSS spinner

spinner.css

/* Loading spinner in dashboard widgets */
@keyframes circles-loader {
  0% {
    transform: rotate(-720deg);
  }
  50% {
    transform: rotate(720deg);
  }
}
.spinner-container .spinner {
    position: relative;
    text-indent: -9999px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: rgba(204, 204, 204, 0.9);
    border-radius: 100%;
    animation: circles-loader 3s infinite ease-in-out;
    transform-origin: 50% 100%;
}
    .spinner-container .spinner::before {
      background: rgba(204, 204, 204, 0.6);
      border-radius: 100%;
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      top: 18.75px;
      left: -10.82532px;
    }
    .spinner-container .spinner::after {
      background: rgba(204, 204, 204, 0.4);
      border-radius: 100%;
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      top: 18.75px;
      left: 10.82532px;
    }

.spinner-container {
    min-height: 100px;
    width: 100%;
    text-align: center;
}

.spinner-text {
    display: block;
}