Simple css animation loading bubbles


In this article you will learn how to create a CSS loading animation with bubbles (circles), you can see it in action in the video below

This is pretty straightforward so let’s dig in to it.
For the filestructire we will need 2 files index.html and style.css

Let’s begin with the Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Css bubble loading</title>
<link rel='stylesheet' type="text/css" href='style.css'>
</head>
<body>

<div id="wrapper">
<div class="loading-container">
<div class="bubble1 bubble"></div>
<div class="bubble2 bubble"></div>
<div class="bubble3 bubble"></div>
</div>
<div id="text">Loading</div>
</div>
</body>
</html>

Straightforward HTML document we have a wrapper wrapper and container loading-container that contains the bubble div’s and a div that contains the text under our bubbles.
I have added 2 classes here one is bubble class which is our actual look of the bubble and 3 more classes bubble1 bubble2 and bubble3 we actually need this to make some animation delays so that the bubbles will fade in and out. First bubble1 class then after some milliseconds bubble2 class and than bubble3 class. That’s all about our html that you need to take in consideration now let’s move on to the css part.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body{
background-color: #33333359;
}
#text {
font-weight: bold;
}
#wrapper{
text-align: center;
margin: 0 auto;
width: 200px;
background-color: #331f1f;
padding: 20px;
color: white;
}
.bubble{
width: 15px;
height: 15px;
background-color: yellow;
border-radius: 50%;
display: inline-block;
-webkit-animation: in-and-out-bubbles 1.20s infinite ease-in-out;
animation: in-and-out-bubbles 1.20s infinite ease-in-out;
}
.bubble1{
-webkit-animation-delay: -0.35s;
animation-delay: -0.35s;
}
.bubble2{
-webkit-animation-delay: -0.20s;
animation-delay: -0.20s;
}
@keyframes in-and-out-bubbles {
0%,80%,100% { transform: scale(0) }
20% { transform: scale(1) }
}
@-webkit-keyframes in-and-out-bubbles {
0%,80%,100% { -webkit-transform: scale(0) }
20% { -webkit-transform: scale(1) }
}

Here i have added some style to the body and centered the #wrapper. And for our actual bubble .bubble we have added some height and width, background color, border radius to make it a circle-bubble, display inline-block so that the bubbles will be one next to each other not one below the other, and than we have the animation. For this example we only took the -webkit-animation and animation but for support of other browsers we can add (see example below)

1
2
3
4
5
6
#someDiv{
-webkit-animation: in-and-out-bubbles infinite ease-in-out; /* Safari 4+ */
-moz-animation: in-and-out-bubbles infinite ease-in-out; /* Fx 5+ */
-o-animation: in-and-out-bubbles infinite ease-in-out; /* Opera 12+ */
animation: in-and-out-bubbles infinite ease-in-out; /* IE 10+, Fx 29+ */
}

Now that we have that out of our side we need to make our animations.

1
2
3
4
5
6
7
8
@keyframes in-and-out-bubbles {
0%,100% { transform: scale(0) }
20% { transform: scale(1) }
}
@-webkit-keyframes in-and-out-bubbles {
0%,100% { -webkit-transform: scale(0) }
20% { -webkit-transform: scale(1) }
}

So what we are doing here is we are saying while this animation lasts (in our case 1.20s) at about the 20% mark we scale the element times two of its size, than set it back to its original size.

And lastly remember the additional classes bubble1 and bubble2 (this can also be done more efficiently but for this example it will do the job) we need to use them to make some delay on the first and second animation

1
2
3
4
5
6
7
8
.bubble1{
-webkit-animation-delay: -0.35s;
animation-delay: -0.35s;
}
.bubble2{
-webkit-animation-delay: -0.20s;
animation-delay: -0.20s;
}

So here we add an animation delay of -0.35s of the .bubble1 class and -0.20s of the .bubble2 class.

And that’s about all.

Have fun and I’ll see you in the next one.



Share