EN
CSS - simple animated loader
5 points
In this short article, we want to show how to create simple animated loader using only CSS.
SImple example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.loader {7
width: 34px;8
height: 34px;9
}10
11
div.loader:after {12
border: 3px solid;13
border-color: #cfeafc transparent;14
border-radius: 50%;15
box-sizing: border-box;16
width: 100%;17
height: 100%;18
animation: rotation 1.1s linear infinite;19
display: block;20
content: '';21
}22
23
@keyframes rotation {24
0% {25
transform: rotate(0deg);26
}27
100% {28
transform: rotate(360deg);29
}30
}31
32
</style>33
</head>34
<body>35
<div class="loader"></div>36
</body>37
</html>