UCI

Preloader: As Component 

<div class="preloader as-component">
    <div class="preloader__wrapper">
        <div class="preloader__content-spinner">
            <div class="preloader__label">
                <div class="text-label-m">CARGANDO LOS RESULTADOS…</div>
            </div>
            <div class="preloader__spinner">
            </div>
            <div class="preloader__spinner-content-dot">
                <div class="preloader__spinner-dot spinner-dot_1"></div>
                <div class="preloader__spinner-dot spinner-dot_2"></div>
                <div class="preloader__spinner-dot spinner-dot_3"></div>
            </div>
        </div>
    </div>
</div>
 
<div class="preloader{{#if isHidden}} hidden{{/if}}{{#if asComponent}} as-component{{/if}}">
    <div class="preloader__wrapper">
        {{#if src}}
            {{#if label}}
            <div class="preloader__label">
                {{> @text-label-m label }}
            </div>
            {{/if}}
        <div class="preloader__gif">
            <img class="preloader__img" src="{{src}}" alt="Preloader">
        </div>
        {{else}}
        <div class="preloader__content-spinner">
            {{#if label}}
            <div class="preloader__label">
                {{> @text-label-m label }}
            </div>
            {{/if}}
            <div class="preloader__spinner">
            </div>
            <div class="preloader__spinner-content-dot">
                <div class="preloader__spinner-dot spinner-dot_1"></div>
                <div class="preloader__spinner-dot spinner-dot_2"></div>
                <div class="preloader__spinner-dot spinner-dot_3"></div>
            </div>
        </div>
        {{/if}}
    </div>
</div>
 
{
  "label": {
    "text": "CARGANDO LOS RESULTADOS…"
  },
  "asComponent": true
}
  • Content: 
    .preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 22;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-primary);

    &::before,
    &::after {
        position: fixed;
        top: -1px;
        display: block;
        width: calc(20px * 2);
        height: 100%;
        background-color: var(--color-primary);
        content: '';

        @media (--viewport-ms-min) {
            width: calc(31px * 2);
        }

        @media (--viewport-sm-min) {
            width: calc(29px * 2);
        }

        @media (--viewport-md-min) {
            width: calc(30px * 2);
        }

        @media (--viewport-cont-no-pad-min) {
            width: calc((100vw - 1352px) / 2 + 30px);
        }

        @media (--viewport-lg-min) {
            width: calc((100vw - 1352px) / 2 + 50px);
        }
    }

    &::before {
        left: calc(-19px - 20px);

        @media (--viewport-ms-min) {
            left: calc(-31px * 2);
        }

        @media (--viewport-sm-min) {
            left: calc(-29px * 2);
        }

        @media (--viewport-md-min) {
            left: calc(-30px * 2);
        }

        @media (--viewport-cont-no-pad-min) {
            left: calc(-1 * ((100vw - 1352px) / 2 + 30px));
        }

        @media (--viewport-lg-min) {
            left: calc(-1 * ((100vw - 1352px) / 2 + 50px));
        }
    }

    &::after {
        right: calc(-19px - 20px);

        @media (--viewport-ms-min) {
            right: calc(-31px * 2);
        }

        @media (--viewport-sm-min) {
            right: calc(-29px * 2);
        }

        @media (--viewport-md-min) {
            right: calc(-30px * 2);
        }

        @media (--viewport-cont-no-pad-min) {
            right: calc(-1 * ((100vw - 1352px) / 2 + 30px));
        }

        @media (--viewport-lg-min) {
            right: calc(-1 * ((100vw - 1352px) / 2 + 50px));
        }
    }

    &.active {
        display: block;
    }

    &__wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &__label {
        margin-bottom: 20px;
    }

    &__img {
        display: block;
        margin: 0 auto;
    }

    &.as-component {
        position: unset;
        top: unset;
        left: unset;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;

        &::before,
        &::after {
            position: unset;
            top: unset;
            display: unset;
            width: unset;
            height: unset;
            background-color: unset;
            content: unset;
        }

        .preloader__wrapper {
            position: unset;
            top: unset;
            left: unset;
            transform: unset;
        }
    }

    &__content-spinner {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        width: max-content;
        height: 5em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &__spinner {
        position: absolute;
        width: 5em;
        height: 5em;
        border-top: 3px solid var(--color-primary);
        border-right: 3px solid var(--color-accent);
        border-bottom: 3px solid var(--color-accent);
        border-left: 3px solid var(--color-accent);
        border-radius: 50%;
        animation: loading 2s linear infinite;
    }

    &__spinner-content-dot {
        position: absolute;
        width: 5em;
        height: 5em;
        padding: 1em;
        margin: auto;
        z-index: 2;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    &__spinner-dot {
        background-color: var(--color-accent);
        width: 5px;
        height: 5px;
        animation-name: bounce_fountainG;
        -o-animation-name: bounce_fountainG;
        -ms-animation-name: bounce_fountainG;
        -webkit-animation-name: bounce_fountainG;
        -moz-animation-name: bounce_fountainG;
        animation-duration: 2.3s;
        -o-animation-duration: 2.3s;
        -ms-animation-duration: 2.3s;
        -webkit-animation-duration: 2.3s;
        -moz-animation-duration: 2.3s;
        animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        animation-direction: normal;
        -o-animation-direction: normal;
        -ms-animation-direction: normal;
        -webkit-animation-direction: normal;
        -moz-animation-direction: normal;
        transform: scale(.3);
        -o-transform: scale(.3);
        -ms-transform: scale(.3);
        -webkit-transform: scale(.3);
        -moz-transform: scale(.3);
        border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;


        &_1 {
            animation-delay: 0.52s;
            -o-animation-delay: 0.52s;
            -ms-animation-delay: 0.52s;
            -webkit-animation-delay: 0.52s;
            -moz-animation-delay: 0.52s;
        }

        &_2 {
            animation-delay: 0.65s;
            -o-animation-delay: 0.65s;
            -ms-animation-delay: 0.65s;
            -webkit-animation-delay: 0.65s;
            -moz-animation-delay: 0.65s;
        }

        &_3 {
            animation-delay: 0.78s;
            -o-animation-delay: 0.78s;
            -ms-animation-delay: 0.78s;
            -webkit-animation-delay: 0.78s;
            -moz-animation-delay: 0.78s;
        }
    }

    .preloader__label+.preloader__spinner,
    .preloader__label+.preloader__spinner+.preloader__spinner-content-dot  {
        margin-top: 40px;
    }

    @keyframes bounce_fountainG {
        0% {
            transform: scale(1);
            background-color: var(--color-accent);
        }

        100% {
            transform: scale(.1);
            background-color: rgb(255, 255, 255);
        }
    }

    @-o-keyframes bounce_fountainG {
        0% {
            -o-transform: scale(1);
            background-color: var(--color-accent);
        }

        100% {
            -o-transform: scale(.9);
            background-color: rgb(255, 255, 255);
        }
    }

    @-ms-keyframes bounce_fountainG {
        0% {
            -ms-transform: scale(1);
            background-color: var(--color-accent);
        }

        100% {
            -ms-transform: scale(.9);
            background-color: rgb(255, 255, 255);
        }
    }

    @-webkit-keyframes bounce_fountainG {
        0% {
            -webkit-transform: scale(1);
            background-color: var(--color-accent);
        }

        100% {
            -webkit-transform: scale(.9);
            background-color: rgb(255, 255, 255);
        }
    }

    @-moz-keyframes bounce_fountainG {
        0% {
            -moz-transform: scale(1);
            background-color: var(--color-accent);
        }

        100% {
            -moz-transform: scale(.9);
            background-color: rgb(255, 255, 255);
        }
    }

    @keyframes loading {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}
  • URL: /components/raw/preloader/preloader.css
  • Filesystem Path: src/02-molecules/preloader/preloader.css
  • Size: 7.4 KB

No notes defined.