Den Haag Design System

Spinner: anchor spinner 

<div class="loading-spinner js-loading-text" role="alert" aria-live="assertive">
    <p class="js-loading-text-copy">Kaart wordt geladen</p>

    <a class="button button--primary button--loading" disabled>
        <div class="spinner">
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
            <div class="spinner-dot"></div>
        </div>
        Download bestand
    </a>

</div>
 
<div class="loading-spinner js-loading-text" role="alert" aria-live="assertive">
  <p class="js-loading-text-copy">Kaart wordt geladen</p>

  {{#if button}}
    <button class="button button--primary button--loading" disabled>
  {{/if}}
  {{#if anchor}}
    <a class="button button--primary button--loading" disabled>
  {{/if}}
    <div class="spinner">
      <div class="spinner-dot"></div>
      <div class="spinner-dot"></div>
      <div class="spinner-dot"></div>
      <div class="spinner-dot"></div>
      <div class="spinner-dot"></div>
      <div class="spinner-dot"></div>
    </div>
  {{#if anchor}}
    Download bestand
    </a>
  {{/if}}
  {{#if button}}
    Download bestand
    </button>
  {{/if}}

</div>
 
{
  "anchor": true
}
  • Content: 
    .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); 
        } 
    }
}
  • URL: /components/raw/spinner/_spinner.scss
  • Filesystem Path: src/components/01-componenten/spinner/_spinner.scss
  • Size: 2.1 KB

There are no notes for this item.