Spinner: Standaard

.loading-spinner {
    p {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
    }

    .spinner {
        width: $space-s;
        height: $space-s;
        margin-right: $space-s;
        position: relative;
        animation: spinner 2.0s infinite linear both;
    
        .spinner-dot {
            width: 100%;
            height: 100%;
            position: absolute;
            animation: spinner-dot 1.5s infinite ease-in-out both; 
          }
          
          .spinner-dot:before {
            content: '';
            display: block;
            width: 25%;
            height: 25%;
            background-color: $grey-dark;
            border-radius: 100%;
            animation: spinner-dot-before 1.5s infinite ease-in-out both; 
          }
          
          .spinner-dot:nth-child(1) { animation-delay: -0.6s; }
          .spinner-dot:nth-child(2) { animation-delay: -0.5s; }
          .spinner-dot:nth-child(3) { animation-delay: -0.4s; }
          .spinner-dot:nth-child(4) { animation-delay: -0.3s; }
          .spinner-dot:nth-child(5) { animation-delay: -0.2s; }
          .spinner-dot:nth-child(6) { animation-delay: -0.1s; }
          .spinner-dot:nth-child(1):before { animation-delay: -0.6s; }
          .spinner-dot:nth-child(2):before { animation-delay: -0.5s; }
          .spinner-dot:nth-child(3):before { animation-delay: -0.4s; }
          .spinner-dot:nth-child(4):before { animation-delay: -0.3s; }
          .spinner-dot:nth-child(5):before { animation-delay: -0.2s; }
          .spinner-dot:nth-child(6):before { animation-delay: -0.1s; }
    
      }
        
      @keyframes spinner {
        100% { transform: rotate(360deg); } 
      }
      
      @keyframes spinner-dot {
        80%, 100% { transform: rotate(360deg); } 
      }
      
      @keyframes spinner-dot-before {
        50% {
          transform: scale(0.4); 
        } 100%, 0% {
          transform: scale(1.0); 
        } 
    }
}