Skip to content

CSS Loading Animation 5

CSS Loading Animation

HTML

 <div class="loading">
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
    </div>

CSS

    body{
        padding:0;
        margin:0;
        background:#2980b9;
    }
    .loading{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        height:40px;
        display:flex;
        align-items:center
    }
    .obj{
        width:15px;
        height:100px;
        background:#fff;
        margin:0 9px;
        border-radius:15px;
        animation:loading .8s infinite;
    }
        .obj:nth-child(2) {
            animation-delay: .1s;
        }
        .obj:nth-child(3) {
            animation-delay: .2s;
        }
        .obj:nth-child(4) {
            animation-delay: .3s;
        }
        .obj:nth-child(5) {
            animation-delay: .4s;
        }
        .obj:nth-child(6) {
            animation-delay: .5s;
        }
        .obj:nth-child(7) {
            animation-delay: .6s;
        }
        .obj:nth-child(8) {
            animation-delay: .7s;
        }
    @keyframes loading{
        0%{
            height:0;
        }
        50%{
            height:100px;
        }
        100%{
            height:0;
        }
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: