solarwood components for Magento 2

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 for this component. */
  • 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

There are no notes for this item.