HTML
<div class="contain">
<div class="preload-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="preload-2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="preload-3"></div>
<div class="preload-4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="preload-5"></div>
</div>
SCSS
html { height: 100%;}
body {
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.preload-1 {
position: relative;
margin-bottom: 40px;
span {
display: block;
position: absolute;
bottom: 0px;
width: 9px; height: 5px;
background: coral;
animation: preload-1 1.5s infinite ease-in-out;
&:nth-child(2) {
left: 11px;
animation-delay: .2s;
}
&:nth-child(3) {
left: 22px;
animation-delay: .4s;
}
&:nth-child(4) {
left: 33px;
animation-delay: .6s;
}
&:nth-child(5) {
left: 44px;
animation-delay: .8s;
}
}
}
@keyframes preload-1 {
0% {
height: 5px;
transform: translateY(0px);
background: coral;
}
25% {
height: 30px;
transform: translateY(15px);
background: cornflowerblue;
}
50% {
height: 5px;
transform: translateY(0px);
background: cornflowerblue;
}
100% {
height: 5px;
transform: translateY(0px);
background: coral;
}
}
.preload-2 {
position: relative;
left: 50%;
margin-bottom: 40px;
width: 40px; height: 40px;
span {
position: absolute;
display: block;
bottom: 0px;
width: 20px; height: 20px;
background: #9b59b6;
&:nth-child(1) {
animation: preload-2-1 1.5s infinite ease-in-out;
}
&:nth-child(2) {
left: 20px;
animation: preload-2-2 1.5s infinite ease-in-out;
}
&:nth-child(3) {
top: 0px;
animation: preload-2-3 1.5s infinite ease-in-out;
}
&:nth-child(4) {
top: 0px;
left: 20px;
animation: preload-2-4 1.5s infinite ease-in-out;
}
}
}
@keyframes preload-2-1 {
0% {
transform: translateX(0) translateY(0) rotate(0);
border-radius: 0;
}
50% {
transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius: 50%; background: #3498db;
}
80% {
transform: translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
100% {
transform: translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
}
@keyframes preload-2-2 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0;
}
50% {
transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius: 50%; background: #f1c40f;
}
80% {
transform: translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
100% {
transform: translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
}
@keyframes preload-2-3 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0;
}
50% {
transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius: 50%; background: #2ecc71;
}
80% {
transform: translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
100% {
transform: translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
}
@keyframes preload-2-4 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius: 0;
}
50% {
transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius: 50%; background: #e74c3c;
}
80% {
transform: translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
100% {
transform: translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
}
.preload-3 {
position: relative;
margin-bottom: 100px;
&:before, &:after {
position: absolute;
content: '';
width: 20px; height: 20px;
border-radius: 50%;
}
&:before {
background: orange;
animation: preload-3-1 1.5s infinite ease-in-out;
}
&:after {
background: yellow;
left: 22px;
animation: preload-3-2 1.5s infinite ease-in-out;
}
}
@keyframes preload-3-1 {
0%, 100% {
transform: translateX(0) rotate(0);
}
50% {
transform: translateX(50px) scale(1.2) rotate(260deg);
border-radius: 0;
}
}
@keyframes preload-3-2 {
0%, 100% {
transform: translateX(0) rotate(0);
}
50% {
transform: translateX(-50px) scale(1.2) rotate(-260deg);
border-radius: 0;
}
}
.preload-4 {
position: relative;
margin-bottom: 100px;
span {
position: absolute;
width: 20px; height: 20px;
background: dodgerblue;
border-radius: 50%;
animation: preload-4 1s infinite ease-in-out;
&:nth-child(2) {
left: 20px;
animation-delay: .2s;
}
&:nth-child(3) {
left: 40px;
animation-delay: .4s;
}
&:nth-child(4) {
left: 60px;
animation-delay: .6s;
}
&:nth-child(5) {
left: 80px;
animation-delay: .8s;
}
}
}
@keyframes preload-4 {
0%, 100% {
opacity: 0.3;
transform: translateY(0);
box-shadow: 0 0 3px rgba(255,255,255,0.1);
}
50% {
opacity: 1;
transform: translateY(-10px);
box-shadow: 0 20px 3px rgba(255,255,255,0.05);
}
}
.preload-5 {
position: relative;
width: 30px; height: 30px;
margin-top: 200px;
border-radius: 50%;
background: peachpuff;
animation: preload-5 1.5s infinite linear;
&:after {
content: '';
position: absolute;
width: 50px; height: 50px;
border-top: 10px solid coral;
border-bottom: 10px solid coral;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 50%;
top: -20px; left: -20px;
}
}
@keyframes preload-5 {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
1 Response