framework7-without-localstorage/src/less/material/preloader.less

Full featured mobile HTML framework for building iOS & Android apps

/* ===
    Preloader
    By Rudi Theunissen (https://github.com/rtheunissen/md-preloader)
=== */
.preloader {
    @easing:      cubic-bezier(.8,.0,.4,.8);

    @speed:      1320ms;       // animation time for each loop
    @color:      #757575;      // Blue A200 in the Material Design color palette
    @linecap:    square;       // could be 'round', but the official one is square
    @loops:      5;            // number of points where the arc meets
    @arc:        0.72;         // fraction of the circumference that the arc grows to
    @perimeter:  67px * pi();  // circumference of the raw svg inner cricle

    font-size: 0;

    display: inline-block;
    width: 32px;
    height: 32px;
    -webkit-animation: preloader-outer @speed * @loops / 2 linear infinite;
    animation: preloader-outer @speed * @loops / 2 linear infinite;

    svg {
        width: 100%;
        height: 100%;
        -webkit-animation: preloader-inner @speed linear infinite;
        animation: preloader-inner @speed linear infinite;

        circle {
            fill: none;
            stroke: @color;
            stroke-linecap: @linecap;
            -webkit-animation: preloader-arc @speed @easing infinite;
            animation: preloader-arc @speed @easing infinite;
        }
    }
    @-webkit-keyframes preloader-outer {
        0% {
            -webkit-transform: rotate(0);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    @keyframes preloader-outer {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes preloader-inner {
        0% {
            -webkit-transform: rotate(-360deg * (1 - @arc));
        }
        100% {
            -webkit-transform: rotate(0);
        }
    }
    @keyframes preloader-inner {
        0% {
            transform: rotate(-360deg * (1 - @arc));
        }
        100% {
            transform: rotate(0);
        }
    }
    @-webkit-keyframes preloader-arc {
        0% {
            stroke-dasharray: 1 @perimeter;
            stroke-dashoffset: 0;
        }
        40% {
            stroke-dasharray: @arc * @perimeter, @perimeter;
            stroke-dashoffset: 0;
        }
        100% {
            stroke-dasharray: 1 @perimeter;
            stroke-dashoffset: -@arc * @perimeter;
        }
    }
    @keyframes preloader-arc {
        0% {
            stroke-dasharray: 1 @perimeter;
            stroke-dashoffset: 0;
        }
        40% {
            stroke-dasharray: @arc * @perimeter, @perimeter;
            stroke-dashoffset: 0;
        }
        100% {
            stroke-dasharray: 1 @perimeter;
            stroke-dashoffset: -@arc * @perimeter;
        }
    }
}
.preloader-inner {
    @preloader-inner-ease: cubic-bezier(0.35, 0, 0.25, 1);
    @preloader-inner-duration: 5.25s;
    @preloader-inner-circle-duration: @preloader-inner-duration * 0.25;
    @preloader-inner-outer-duration: @preloader-inner-duration * (5/9);

    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: preloader-inner-rotate @preloader-inner-duration @preloader-inner-ease infinite;
    animation: preloader-inner-rotate @preloader-inner-duration @preloader-inner-ease infinite;
    .preloader-inner-gap {
        position: absolute;
        width: 2px;
        left: 50%;
        margin-left: -1px;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        border-top: 4px solid #757575;
    }
    .preloader-inner-left, .preloader-inner-right {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        overflow: hidden;
    }
    .preloader-inner-half-circle {
        position: absolute;
        top: 0;
        height: 100%;
        width: 200%;
        box-sizing: border-box;
        border: 4px solid #757575;
        border-bottom-color: transparent !important;
        border-radius: 50%;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: (@preloader-inner-duration * 0.25);
        -webkit-animation-timing-function: @preloader-inner-ease;
        animation-iteration-count: infinite;
        animation-duration: (@preloader-inner-duration * 0.25);
        animation-timing-function: @preloader-inner-ease;
    }
    .preloader-white & {
        .preloader-inner-gap, .preloader-inner-half-circle {
            border-color: #fff;
        }
    }
    .preloader-inner-left {
        left: 0;
        .preloader-inner-half-circle {
            left: 0;
            border-right-color: transparent !important;
            -webkit-animation-name: preloader-left-rotate;
            animation-name: preloader-left-rotate;
        }
    }
    .preloader-inner-right {
        right: 0;
        .preloader-inner-half-circle {
            right: 0;
            border-left-color: transparent !important;
            -webkit-animation-name: preloader-right-rotate;
            animation-name: preloader-right-rotate;
      }
    }
    .color-multi & {
        .preloader-inner-left {
            .preloader-inner-half-circle {
                -webkit-animation-name: preloader-left-rotate-multicolor;
                animation-name: preloader-left-rotate-multicolor;
            }
        }
        .preloader-inner-right {
            .preloader-inner-half-circle {
                -webkit-animation-name: preloader-right-rotate-multicolor;
                animation-name: preloader-right-rotate-multicolor;
          }
        }
    }
}
@-webkit-keyframes preloader-left-rotate {
    0%, 100% {
        -webkit-transform: rotate(130deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
    }
}
@keyframes preloader-left-rotate {
    0%, 100% {
        transform: rotate(130deg);
    }
    50% {
        transform: rotate(-5deg);
    }
}
@-webkit-keyframes preloader-right-rotate {
    0%, 100% {
        -webkit-transform: rotate(-130deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
    }
}
@keyframes preloader-right-rotate {
    0%, 100% {
        transform: rotate(-130deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

@-webkit-keyframes preloader-inner-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
    }
    25% {
        -webkit-transform: rotate(270deg);
    }
    37.5% {
        -webkit-transform: rotate(405deg);
    }
    50% {
        -webkit-transform: rotate(540deg);
    }
    62.5% {
        -webkit-transform: rotate(675deg);
    }
    75% {
        -webkit-transform: rotate(810deg);
    }
    87.5% {
        -webkit-transform: rotate(945deg);
    }
    100% {
        -webkit-transform: rotate(1080deg);
    }
}
@keyframes preloader-inner-rotate {
    12.5% {
        transform: rotate(135deg);
    }
    25% {
        transform: rotate(270deg);
    }
    37.5% {
        transform: rotate(405deg);
    }
    50% {
        transform: rotate(540deg);
    }
    62.5% {
        transform: rotate(675deg);
    }
    75% {
        transform: rotate(810deg);
    }
    87.5% {
        transform: rotate(945deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}
@-webkit-keyframes preloader-left-rotate-multicolor {
    0%,
    100% {
        border-left-color: #4285F4;
        -webkit-transform: rotate(130deg);
    }
    75% {
        border-left-color: #1B9A59;
        border-top-color: #1B9A59;
    }
    50% {
        border-left-color: #F7C223;
        border-top-color: #F7C223;
        -webkit-transform: rotate(-5deg);
    }
    25% {
        border-left-color: #DE3E35;
        border-top-color: #DE3E35;
    }
}
@keyframes preloader-left-rotate-multicolor {
    0%,
    100% {
        border-left-color: #4285F4;
        transform: rotate(130deg);
    }
    75% {
        border-left-color: #1B9A59;
        border-top-color: #1B9A59;
    }
    50% {
        border-left-color: #F7C223;
        border-top-color: #F7C223;
        transform: rotate(-5deg);
    }
    25% {
        border-left-color: #DE3E35;
        border-top-color: #DE3E35;
    }
}
@-webkit-keyframes preloader-right-rotate-multicolor {
    0%,
    100% {
        border-right-color: #4285F4;
        -webkit-transform: rotate(-130deg);
    }
    75% {
        border-right-color: #1B9A59;
        border-top-color: #1B9A59;
    }
    50% {
        border-right-color: #F7C223;
        border-top-color: #F7C223;
        -webkit-transform: rotate(5deg);
    }
    25% {
        border-top-color: #DE3E35;
        border-right-color: #DE3E35;
    }
}
@keyframes preloader-right-rotate-multicolor {
    0%,
    100% {
        border-right-color: #4285F4;
        transform: rotate(-130deg);
    }
    75% {
        border-right-color: #1B9A59;
        border-top-color: #1B9A59;
    }
    50% {
        border-right-color: #F7C223;
        border-top-color: #F7C223;
        transform: rotate(5deg);
    }
    25% {
        border-top-color: #DE3E35;
        border-right-color: #DE3E35;
    }
}