Loader

$loader__size                  : 100% !default;
$loader__icon-size             : 56px !default;
$loader__bg-icon               : url(../images/icons/loader.svg) !default;
$loader__background            : rgba(255, 255, 255, 0.5) !default;
$loader__bg-repeat             : no-repeat !default;
$loader__bg-position           : center !default;
$loader__bg-size               : cover !default;
$loader__z-index               : $z-index-high !default;
$loader__icon-after-display    : block !default;
$loader__icon-after-bg-size    : 400% 400% !default;
$loader__icon-after-bg-position: 100% 0% !default;
$loader__bg-after-image        : linear-gradient(to top, $color-primary 50%, $gray-light 50%) !default;
$loader__animation             : gradientBg 2.5s 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;

        &:after {
            content: '';
            display: $loader__icon-after-display;
            position: absolute;
            width: 100%;
            height: 100%;
            mask: $loader__bg-icon $loader__bg-repeat $loader__bg-position / $loader__bg-size;
            background-size: $loader__icon-after-bg-size;
            background-image: $loader__bg-after-image;
            background-position: $loader__icon-after-bg-position;
            animation: $loader__animation;
        }
    }
}