Skip to content

Loading CSS Animation 4

Loading CSS Animation

HTML CODE:

<div class="middle">
        <div class="bar bar1"></div>
        <div class="bar bar2"></div>
        <div class="bar bar3"></div>
        <div class="bar bar4"></div>
        <div class="bar bar5"></div>
        <div class="bar bar6"></div>
        <div class="bar bar7"></div>
        <div class="bar bar8"></div>
        <div class="bottom"></div>
    </div>

CSS CODE:

        body{
            margin:0;
            padding:0;
            background:#333;
        }
        .middle{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            )
        }
        .bar{
            width:15px;
            height:120px;
            background:white;
            display:inline-block;
            transform-origin:bottom center;
            animation:loading 1.5s ease-in-out infinite;
        }
        .bar:before{
            content:"";
            height:120px;
            width:15px;
            background:#fff;
            display:inline-block;
            animation:loading 1.5s ease-in-out infinite;
            position:absolute;
            top:200px;
            left:0;
        }
        .bar1 {
            animation-delay: 0.1s;
        }
        .bar2 {
            animation-delay: 0.2s;
        }
        .bar3 {
            animation-delay: 0.3s;
        }
        .bar4 {
            animation-delay: 0.4s;
        }
        .bar5 {
            animation-delay: 0.5s;
        }
        .bar6 {
            animation-delay: 0.6s;
        }
        .bar7 {
            animation-delay: 0.7s;
        }
        .bar8 {
            animation-delay: 0.8s;
        }
        @keyframes loading{
            0% {
                transform:scaleY(0.1);
                background:#fff;
            }
            50% {
                transform:scaleY(1);
                background:#ff6a00
            }
            100% {
                transform: scaleY(0.1);
                background: transparent;
            }
        }

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: