Skip to content
Advertisements

CSS LOADING ANIMATION 3

CSS LOADING ANIMATION

HTML

<div class="container">
        <span class="a a"></span>
        <span class="a2 a"></span>
        <span class="a3 a"></span>
        <span class="a2 a"></span>
        <span class="a3 a"></span>
        <span class="a4 a"></span>
        <span class="a3 a"></span>
        <span class="a4 a"></span>
        <span class="a5 a"></span>
    </div>

CSS

*{
            margin:0;
            padding:0;
        }
        body{
            background:#333;
        }
        .container{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:285px;
            height:285px;
        }
        .a{
            width:75px;
            height:75px;
            position:relative;
            float:left;
            margin:10px;
        }
        .a::before{
            content:"";
            position:absolute;
            bottom:0;
            right:0;
            height:100%;
            width:100%;
            background:#b0b100;
            border-radius:50%;
            animation: a 1s infinite;
        }
        .a2::before {
            animation-delay: 0.1s;
        }
        .a3::before {
            animation-delay: 0.2s;
        }
        .a4::before {
            animation-delay: 0.3s;
        }
        .a5::before {
            animation-delay: 0.4s;
        }
        @keyframes a{
            100%{
                width:0;
                height:0;
            }
        }
Advertisements

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: