Si quieres mejorar la experiencia de usuario al momento de que esté cargando una página, has llegado al lugar indicado, en éste tutorial de HTML y CSS aprenderás a crear una animación de carga o Loader que puede ser usada como dije para cuando este cargando una página o cuando se ejecute una acción en la página web como podría ser al iniciar sesión.
Video
Código HTML
<!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">
<link rel="stylesheet" href="style.css">
<title>Loader</title>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
<div class="loader2"></div>
</div>
</body>
</html>
Código CSS
*{
box-sizing: border-box;
}
.loader-container{
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.loader-container .loader{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: solid 4px transparent;
border-top-color: #0dac77;
border-left-color: #0dac77;
border-radius: 50%;
animation: loader 1.4s linear infinite;
}
.loader-container .loader2{
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 70%;
border: solid 4px transparent;
border-top-color: #283fc3;
border-left-color: #283fc3;
border-radius: 50%;
animation: loader2 1.2s linear infinite;
}
@keyframes loader{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100%{
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes loader2{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100%{
transform: translate(-50%, -50%) rotate(-360deg);
}
}
