Loader

<div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
    <div class="loader__icon"></div>
</div>
<div
    class="loader loader--visible"
    aria-live="polite"
    aria-label="Do not refresh the page"
>
    <div class="loader__icon"></div>
</div>
/* No context defined. */
  • Content:
    $loader__size            : 100% !default;
    $loader__icon-size       : 56px !default;
    $loader__background      : rgba(255, 255, 255, 0.5) !default;
    $loader__z-index         : $z-index-high !default;
    $loader__border          : 8px solid $black !default;
    $loader__border-top-color: transparent !default;
    $loader__border-radius   : 50% !default;
    $loader__animation       : spin 1s linear infinite !default;
    
    .loader {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: $loader__size;
        height: $loader__size;
        background-color: $loader__background;
        z-index: $loader__z-index;
    
        &--visible {
            display: block;
        }
    
        &__icon {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: $loader__icon-size;
            height: $loader__icon-size;
            margin: auto;
            background: transparent;
            border: $loader__border;
            border-top-color: $loader__border-top-color;
            border-radius: $loader__border-radius;
            animation: $loader__animation;
        }
    }
    
  • URL: /components/raw/loader/_loader.scss
  • Filesystem Path: build/components/Molecules/loader/_loader.scss
  • Size: 1.1 KB

No notes defined.