Loader

Use loader element for implifying that a loading action is occurring on the page.

Examples

Storefront theme provides predefined stylings for three loaders those are small, medium and large.

HTML

<div class="loader" role="progressbar" aria-busy="true" aria-valuetext="Loading">
    <div class="loader__spinner"></div>
    <div class="loader__text">Small...</div>
</div>  

<div class="loader" role="progressbar" aria-busy="true" aria-valuetext="Loading">
    <div class="loader__spinner loader__spinner_m"></div>
    <div class="loader__text loader__text_m">Medium...</div>
</div>  

<div class="loader" role="progressbar" aria-busy="true" aria-valuetext="Loading">
    <div class="loader__spinner loader__spinner_l"></div>
    <div class="loader__text loader__text_l">Large...</div>
</div>  

Aria attributes

Because .loader class is used with <div> elements, we use additional aria attributes to tell assistive technologies such as screen readers what purpose the element serves. Those are:

• role="progressbar"
• aria-busy="true"
• aria-valuetext="Loading"

However, you can use them with any element. Eg. <p> or <span>. You should remeber to add appropriate attributes mentioned above to such elements.

LESS

You can modify any link less variable in your User Less section to change loader styles.

Loaders variables

Variables used to style loaders.

@loaderWidthXS: 16px;
@loaderHeightXS: 16px;

@loaderWidthS: 32px;
@loaderHeightS: 32px;

@loaderWidthM: 48px;
@loaderHeightM: 48px;

@loaderWidthL: 64px;
@loaderHeightL: 64px;

@loaderBorderStyle: solid;
@loaderBorderRadius: 50%;

@loaderBorderWidthXS: 2px;
@loaderBorderWidthS: 3px;
@loaderBorderWidthM: 4px;
@loaderBorderWidthL: 6px;

@loaderColorTrack: @neutralColors100;
@loaderColorMark: @primaryColors500;

@loaderColor: @neutralColors1000;

@loaderFontSizeInPxS: @fontSizeInPxS;
@loaderLineHeightInPxS: @lineHeightInPxS;

@loaderFontSizeInPxM: @fontSizeInPxS;
@loaderLineHeightInPxM: @lineHeightInPxS;

@loaderFontSizeInPxL: @fontSizeInPxM;
@loaderLineHeightInPxL: @lineHeightInPxM;

@loaderZIndex: 10;

If you want to change loader styles, you can just change the variables. To change the font-size of a small loader just modify @loaderFontSizeInPxS variable.

@loaderFontSizeInPxS: 20px;

To change small loader look:

@loaderWidthS: 20px;
@loaderHeightS: 20px;
@loaderBorderWidthS: 1px;

Loader mixins

Those mixins are used to create loader variants.

.loader-decorate_size(@width, @height, @borderWidth) {
    width: @width;
    height: @height;
    border-width: @borderWidth;
}

.loader-decorate_text(@fontSize, @lineHeight) {
    .font-size(@fontSize);
    .line-height(@lineHeight);
}

.loader-decorate-appearance-spinner(@loaderBorderStyle, @loaderTrackColor, @loaderMarkColor) {
    border: @loaderBorderStyle @loaderTrackColor;

    border-left-color: @loaderMarkColor;
    border-top-color: @loaderMarkColor;

    border-radius: @loaderBorderRadius;
}

If you want to create xs variant you can use the .loader-decorate_size mixin (You have to provide those variables)

.loader {
    &__spinner {
        &_xs {
            .loader-decorate_size(@loaderWidthXS, @loaderHeightXS, @loaderBorderWidthXS);
        }
    }
}

And if you want to change the appearance of the spinner you can use the .loader-decorate-appearance-spinner mixin (You have to provide those variables)

.loader {
    &__spinner {
        .loader-decorate-appearance-spinner(@loaderBorderStyleCustom, @loaderColorTrackCustom, @loaderColorMarkCustom);
    }
}

Loaders styles

Here are standard loader styles.

.loader {
    display: flex;
    justify-content: center;
    align-items: center;

    &__spinner {
        .loader-decorate_size(@loaderWidthS, @loaderHeightS, @loaderBorderWidthS);
        .loader-decorate-appearance-spinner(@loaderBorderStyle, @loaderColorTrack, @loaderColorMark);

        animation: spin 1s linear infinite;

        &_xs {
            .loader-decorate_size(@loaderWidthXS, @loaderHeightXS, @loaderBorderWidthXS);
        }

        &_m {
            .loader-decorate_size(@loaderWidthM, @loaderHeightM, @loaderBorderWidthM);
        }

        &_l {
            .loader-decorate_size(@loaderWidthL, @loaderHeightL, @loaderBorderWidthL);
        }
    }

    &__text {
        .loader-decorate_text(@loaderFontSizeInPxS, @loaderLineHeightInPxS);

        color: @loaderColor;

        &_m {
            .loader-decorate_text(@loaderFontSizeInPxM, @loaderLineHeightInPxM);
        }

        &_l {
            .loader-decorate_text(@loaderFontSizeInPxL, @loaderLineHeightInPxL);
        }
    }

    &_full {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: @globalBodyBackgroundColor;
        z-index: @loaderZIndex;
    }
}

.loader-mask () {
    position: relative;

    &::after {
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        content: '';
        position: absolute;
        .loader-decorate_size(@loaderWidthS, @loaderHeightS, @loaderBorderWidthS);
        .loader-decorate-appearance-spinner(@loaderBorderStyle, @loaderColorTrack, @loaderColorMark);
        z-index: 11;

        animation: spin 1s linear infinite;
    }

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: @globalBodyBackgroundColor;
        z-index: @loaderZIndex;
        opacity: 0.5;
        display: flex;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}