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:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.loader {
width: 34px;
height: 34px;
}
div.loader:after {
border: 3px solid;
border-color: #cfeafc transparent;
border-radius: 50%;
box-sizing: border-box;
width: 100%;
height: 100%;
animation: rotation 1.1s linear infinite;
display: block;
content: '';
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>