Loader

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Loader con CSS</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="loader"> </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 70px;
    height: 70px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #FFA618;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}