div.loader
- for i in (0 .. 25)
div.dot
View Compiled
html,
body {
height: 100%;
}
body {
align-items: center;
background: #d65b9e;
background: linear-gradient(45deg, #d65b9e 1%,#f699cb 22%,#ffacd9 51%,#f699cb 83%,#d65b9e 100%);
display: flex;
justify-content: center;
}
$dot-count: 26;
$dot-size: 10px;
$dot-space: 15px;
$dot-start: (($dot-count / 2 + 1) * ($dot-size + $dot-space)) / 2;
$animation-time: 2s;
$animation-distance: 25px;
.loader {
position: relative;
.dot {
animation-name: movement;
animation-duration: $animation-time;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
height: $dot-size;
position: absolute;
top: -#{$dot-size};
transform: translate3d(0, -#{$animation-distance}, 0) scale(1);
width: $dot-size;
@for $i from 1 through $dot-count {
$dot-move: ceil($i / 2);
$dot-pos: $dot-start - (($dot-size + $dot-space) * $dot-move);
$animation-delay: -#{$i * .1}s;
@if $i % 2 == 0 {
$animation-delay: -#{($i * .1) + ($animation-time / 2)};
}
&:nth-of-type(#{$i}) {
animation-delay: $animation-delay;
left: $dot-pos;
&::before {
animation-delay: $animation-delay;
}
}
}
&::before {
animation-name: size-opacity;
animation-duration: $animation-time;
animation-iteration-count: infinite;
animation-timing-function: ease;
background: white;
border-radius: 50%;
content: '';
display: block;
height: 100%;
width: 100%;
}
&:nth-of-type(even)::before {
background-color: #ff47aa;
box-shadow: inset 0 0 4px darken(#ff47aa, 10%);
}
}
}
@keyframes movement {
0% {
transform: translate3d(0, -#{$animation-distance}, 0);
z-index: 0;
}
50% {
transform: translate3d(0, #{$animation-distance}, 0);
z-index: 10;
}
100% {
transform: translate3d(0, -#{$animation-distance}, 0);
z-index: -5;
}
}
@keyframes size-opacity {
0% {
opacity: 1;
transform: scale(1);
}
25% {
transform: scale(1.5);
}
50% {
opacity: 1;
}
75% {
opacity: .35;
transform: scale(.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.