CSS Loading Animation || 3 Dots Animation CSS || 3 Dots Loading Animation Using CSS

CSS Loading Animation || 3 Dots Animation CSS || 3 Dots Loading Animation Using CSS - Creation Code

CSS Loading Animation:

CSS 3 dots loading animation is a very usefull project if you wanna make an app where you want a

loading animation like other apps. Giving a loading animation in your app or website will make your website or app look professional and it will give a great user experience and your app or website will go viral with this loading animation. We are going to see how we can make a loading animation using CSS

Roadmap of loading animation:

First we will create 3 div with class of 'dot dot1', 'dot dot2', 'dot dot3'
Second we will create a simple dot shape
Third and final give each dot a different animation

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Dot Loading</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</body>
</html>

CSS:

body {
    background: fixed;
    background-color:  #11161b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dot {
    position: relative;
    left: 25px;
    height: 25px;
    width: 25px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.dot1 {
    background-color: cyan;
    animation: scale 1s linear infinite;
}
.dot2 {
    background-color: cyan;
    animation: scale 1s .1s linear infinite;
}
.dot3 {
    background-color: cyan;
    animation: scale 1s .2s linear infinite;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(.5);
    }
    50% {
        transform: scale(.0);
    }
    75% {
        transform: scale(.5);
    }
    100% {
        transform: scale(1);
    }
}

Output:

Comments

Create Ping Pong Game in Python

Ping Pong Game: Table tennis , also known as ping-pong and whiff-whaff , is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small rackets. The game takes place on a hard table divided by a net. Except for the initial serve, the rules are generally as follows: players must allow a ball played toward them to bounce once on their side of the table and must return it so that it bounces on the opposite side at least once. A point is scored when a player fails to return the ball within the rules. Play is fast and demands quick reactions. Spinning the ball alters its trajectory and limits an opponent's options, giving the hitter a great advantage. We can make it using pygame but I keep it more simple we will create this game using only the turtle module so let's drive into the code without wasting any time Code: # Import required library import turtle # Create screen sc = turtle . Scre...

How To Draw BMW Logo - In Python

I know I don't need to introduce BMW as it is a very popular luxury car. Today we gonna draw the BMW logo in python. I know that you can draw it using a pencil and other tools like AutoCAD etc. But we are programmers we talk with computers so let's tell our computer to draw this logo for use with the help of python. Module The only module we will use is that turtle Code: import turtle as t t.begin_fill() t.fillcolor( '#008ac9' ) for i in range ( 50 ): t.forward( 4 ) t.left( 2 ) t.right(- 80 ) t.forward( 116 ) t.right(- 90 ) t.forward( 132 ) t.end_fill() t.penup() t.pendown() t.right( 90 ) for i in range ( 50 ): t.forward( 4 ) t.left(- 2 ) t.right( 80 ) t.forward( 116 ) t.forward(- 116 ) t.right( 90 ) t.begin_fill() t.fillcolor( '#008ac9' ) for j in range ( 45 ): t.forward(- 4 ) t.left(- 2 ) t.right(- 90 ) t.forward( 116 ) t.end_fill() t.right( 180 ) t.forward( 116 ) t.right( 90 ) for i in ...

Draw Minecraft Charater in Python

Minecraft is a sandbox video game developed by the Swedish video game developer Mojang Studios . The game was created by Markus "Notch" Persson in the Java programming language . Following several early private testing versions, it was first made public in May 2009 before fully releasing in November 2011, with Jens Bergensten then taking over development. Minecraft has since been ported to several other platforms and is the best-selling video game of all time , with over 238 million copies sold and nearly 140 million monthly active users as of 2021 . We gonna build a character of Minecraft using our creativity and coding skills so let's drive into the code: Code: import turtle as t def eye ( r , a ): t . fillcolor ( 'brown' ) t . begin_fill () t . circle ( r , a ) t . end_fill () t . begin_fill () t . fillcolor (...

Creation Code

Search This Blog