El Loader Ring se puede generar fácilmente usando HTML y CSS. Loader Ring se muestra cuando los navegadores están cargando páginas web. Para crear un anillo de carga, haremos uso de animaciones CSS que permiten la animación de elementos HTML.
El código HTML se usa para crear una estructura básica del anillo de carga animado y el código CSS se usa para establecer el estilo del anillo de carga. Usaremos la regla @keyframes que permite que la animación cambie gradualmente del estilo actual al nuevo estilo en ciertos momentos, luego usaremos la propiedad de transformación para rotar la animación 360 grados.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to Create Animated Loader
Ring using HTML and CSS?
</title>
<style>
body {
margin: 0;
padding: 0;
background: #008000;
}
.circle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
animation: effect 1s linear infinite;
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
}
@keyframes effect {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA