Skip to content
Advertisements

CSS Loading Animation 6

CODEPEN:

CSS Loading Animation

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Loding%20Animation


HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>

    <div class="top a1"></div>
    <div class="top a2"></div>
    <div class="top a3"></div>
    <div class="top a4"></div>


</body>
</html>

CSS CODE:

body, html {
    background: #252626;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
.top {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 30px;
}
.top.a1 , .top.a1:before{
    background: #d21f1f;
    animation-delay: 0s;
}
.top.a2, .top.a2:before{
    background: #69c820;
    animation-delay: 0.2s;
}
.top.a3, .top.a3:before{
    background: #ceb32a;
    animation-delay: 0.4s;
}
.top.a4, .top.a4:before{
    background: #306bb3;
    animation-delay: 0.6s;
}
.top:before{
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    animation: ani 2s infinite ease-in;
}
@keyframes ani{
    0%{
        transform: scale(0.5);
        opacity: 1;
    }
    100%{
        transform: scale(2);
        opacity: 0;
    }
}
Advertisements

2 Comments »

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: