Create a Loading Animation with HTML, CSS (No Javascript)
Published in
3 min readMay 11, 2020
This is a tutorial on how to create a loading animation for a website utilizing HTML and CSS.
- Create a new HTML document and link to a new CSS document.
<html>
<head>
<meta charset = 'utf-8'>
<link href = "animation.css" rel = "stylesheet"
type = "text/css">
<html>2. Create four different divs, one will be dedicated to the container and the other three will be dedicated to the three dots.
<html>
<head>
<meta charset = 'utf-8'>
<link href = "animation.css" rel = "stylesheet"
type = "text/css">
<div class="container">
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
</div><html>
3. Move over to the CSS Document and start styling the background.
body {
width: 100%;
height: 100%;
background-color: white;
}4. Style the container by specifying the width, height, margins, and position.
.container {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: auto;
}5. Style the dots, add a background color for each dot. Change the width and height to your preference.
.dot {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
margin: auto;
}.dot-3 {
background-color: #f74d75;
}.dot-2 {
background-color: #10beae;
}.dot-1 {
background-color: #ffe386;
}
6. Move back to the HTML document and insert the following code.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" result="blur" />
</filter>
</defs>
</svg>Move back to the CSS document and add an animation to each dot.
animation: dot-3-move 2s ease infinite, index 6s ease infinite;
animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;Add the following code into the CSS document. @Keyframes specifies the animation code.
@keyframes dot-3-move {
20% {transform: scale(1)}
45% {transform: translateY(-18px) scale(.45)}
60% {transform: translateY(-90px) scale(.45)}
80% {transform: translateY(-90px) scale(.45)}
100% {transform: translateY(0px) scale(1)}
}@keyframes dot-2-move {
20% {transform: scale(1)}
45% {transform: translate(-16px, 12px) scale(.45)}
60% {transform: translate(-80px, 60px) scale(.45)}
80% {transform: translate(-80px, 60px) scale(.45)}
100% {transform: translateY(0px) scale(1)}
}@keyframes dot-1-move {
20% {transform: scale(1)}
45% {transform: translate(16px, 12px) scale(.45)}
60% {transform: translate(80px, 60px) scale(.45)}
80% {transform: translate(80px, 60px) scale(.45)}
100% {transform: translateY(0px) scale(1)}
}@keyframes rotate-move {
55% {transform: translate(-50%, -50%) rotate(0deg)}
80% {transform: translate(-50%, -50%) rotate(360deg)}
100% {transform: translate(-50%, -50%) rotate(360deg)}
}@keyframes index {
0%, 100% {z-index: 3}
33.3% {z-index: 2}
66.6% {z-index: 1}
}
