CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
display: flex;
}
div[class*=wrapper] {
height: 100%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
/*
=======================
Audio Loader #1
=======================
*/
.first-wrapper {
background-color: #2ecc71;
}
.audio-loader-1 {
width: 16em;
height: 16em;
color: #fff;
position: relative;
}
.audio-loader-1::after,
.audio-loader-1 i,
.audio-loader-1 i::before,
.audio-loader-1 i::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.25em;
height: 0.5em;
transform: translate(-50%,-50%);
background: currentColor;
border-radius: 0.125em;
}
.audio-loader-1::after { animation: audio-4 1.35s infinite; }
.audio-loader-1 i::before {
left: -0.8125em;
animation: audio-1 1.35s infinite;
}
.audio-loader-1 i::after {
left: 1.0625em;
animation: audio-3 1.35s infinite;
}
.audio-loader-1 i:first-child {
margin-left: -1.875em;
animation: audio-2 1.35s infinite;
}
.audio-loader-1 i:last-child {
margin-left: 1.875em;
animation: audio-6 1.35s infinite;
}
.audio-loader-1 i:last-child::before { animation: audio-5 1.35s infinite; }
.audio-loader-1 i:last-child::after { animation: audio-7 1.35s infinite; }
@keyframes audio-1 {
9% { height: 1.75em; }
36% { height: 0.5em; }
42% { height: 2.375em; }
69% { height: 0.5em; }
76% { height: 3.625em; }
100% { height: 1em; }
}
@keyframes audio-2 {
9% { height: 5.5em; }
36% { height: 0.5em; }
42% { height: 5.5em; }
69% { height: 0.5em; }
76% { height: 6.75em; }
100% { height: 1em; }
}
@keyframes audio-3 {
9% { height: 6.5em; }
36% { height: 0.5em; }
42% { height: 3.5em; }
69% { height: 0.5em; }
76% { height: 3.5em; }
100% { height: 1em; }
}
@keyframes audio-4 {
9% { height: 1.875em; }
36% { height: 0.5em; }
42% { height: 3.75em; }
69% { height: 0.5em; }
76% { height: 5.625em; }
100% { height: 1em; }
}
@keyframes audio-5 {
9% { height: 5em; }
36% { height: 0.5em; }
42% { height: 1.25em; }
69% { height: 0.5em; }
76% { height: 3.75em; }
100% { height: 1em; }
}
@keyframes audio-6 {
9% { height: 6.125em; }
36% { height: 0.5em; }
42% { height: 6.875em; }
69% { height: 0.5em; }
76% { height: 2.5em; }
100% { height: 1em; }
}
@keyframes audio-7 {
9% { height: 3.125em; }
36% { height: 0.5em; }
42% { height: 1.875em; }
69% { height: 0.5em; }
76% { height: 3.75em; }
100% { height: 1em; }
}
/*
=======================
Audio Loader #2
=======================
*/
.second-wrapper {
background-color: #e74c3c;
}
.audio-loader-2 ul {
margin: 0;
list-style: none;
width: 120px;
height: 10px;
position: relative;
padding: 0;
}
.audio-loader-2 ul li {
position: absolute;
width: 3px;
height: 0;
background-color: #fff;
bottom: 0;
}
.audio-loader-2 li:nth-child(1) {
left: 0;
animation: sequence-1 1s ease infinite 0;
}
.audio-loader-2 li:nth-child(2) {
left: 15px;
animation: sequence-2 1s ease infinite 0.1s;
}
.audio-loader-2 li:nth-child(3) {
left: 30px;
animation: sequence-1 1s ease-in-out infinite 0.2s;
}
.audio-loader-2 li:nth-child(4) {
left: 45px;
animation: sequence-2 1s ease-in infinite 0.3s;
}
.audio-loader-2 li:nth-child(5) {
left: 60px;
animation: sequence-1 4s ease-in-out infinite 0.4s;
}
.audio-loader-2 li:nth-child(6) {
left: 75px;
animation: sequence-2 2s ease infinite 0.5s;
}
.audio-loader-2 li:nth-child(7) {
left: 90px;
animation: sequence-2 1s ease infinite 0.1s;
}
.audio-loader-2 li:nth-child(8) {
left: 105px;
animation: sequence-2 1s ease infinite 0.8s;
}
@keyframes sequence-1 {
0% { height: 5px; }
50% { height: 30px; }
100% { height: 2px; }
}
@keyframes sequence-2 {
0% { height: 20px; }
50% { height: 5px; }
100% { height: 20px; }
}
