346 lines
8.8 KiB
Plaintext
346 lines
8.8 KiB
Plaintext
/* ===
|
|
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;
|
|
}
|
|
} |