/* the spinner (loading message  */
.spinner-6 {
    width: 80px;
    aspect-ratio: 1;
    display:grid;
    -webkit-mask: conic-gradient(from 15deg,#0000,#000);
    animation: s6 1s infinite steps(12);
    /* Centering logic */
    position: absolute; /* Position relative to the screen */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
  }
  .spinner-6,
  .spinner-6:before,
  .spinner-6:after{
    background:
      radial-gradient(closest-side at 50% 12.5%,
       #f03355 96%,#0000) 50% 0/20% 80% repeat-y,
      radial-gradient(closest-side at 12.5% 50%,
       #f03355 96%,#0000) 0 50%/80% 20% repeat-x;
  }
  .spinner-6:before,
  .spinner-6:after {
    content: "";
    grid-area: 1/1;
    transform: rotate(30deg);
  }
  .spinner-6:after {
    transform: rotate(60deg);
  }
  
  @keyframes s6 {
    100% {transform:rotate(1turn)}
  }