Bar Loader - HTML CSS

Author - thinhphamvn

December 22, 2022

result

index.html

style.css

>>> Download Source Code (Google Drive)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000c18;
}
.loader {
    width: 60px;
    height: 50px;
}
.loader>div {
    height: 100%;
    width: 8px;
    float: left;
    animation: delay 0.8s infinite ease-in-out;
}
.loader .bar1 {
    background-color: #1f3f8c;
}
.loader .bar2 {
    background-color: #42aeea;
    animation-delay: -0.7s;
}
.loader .bar3 {
    background-color: #008000;
    animation-delay: -0.6s;
}
.loader .bar4 {
    background-color: #ffdd00;
    animation-delay: -0.5s;
}
.loader .bar5 {
    background-color: #f09800;
    animation-delay: -0.4s;
}
.loader .bar6 {
    background-color: #f80067;
    animation-delay: -0.3s;
}
@keyframes delay {
    0%,
    40%,
    100% {
        transform: scaleY(0.05);
    }
    20% {
        transform: scaleY(1);
    }
}

Thanks for watching. Leave your comments or suggestions to develop the article better.

Coding Video: Bar Loader - HTML CSS Speed Code https://youtu.be/nag4PiiyBYE

Bar Loader - HTML CSS

Post a Comment

Animated Snowflake - HTML CSS JS - P5JS

Speech Bubble

Hot Posts

Labels

Search This Blog

Most Recent

Animated Snowflake - HTML CSS JS - P5JS

Fold Cube Loader - HTML CSS

Square Pattern - A Square Has 2 Diagonals - HTML CSS JavaScript

Square of star and sharp characters - HTML CSS JavaScript

Create your C++ Console project with Visual Studio 2022

Contact form

Bar Loader - HTML CSS

You may like these posts

Post a Comment

Contact form