Código de Loading Simple con HTML y CSS

Creación de un Diseño de Loading

Imagen de Loading

En este proyecto, crearemos un diseño de loading que es comúnmente visto en muchas páginas web. Este diseño presenta un círculo que gira, brindando al usuario una indicación visual de que la página se está cargando.

Código HTML 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Enlazamos los estilos CSS -->
    <link rel="stylesheet" href="styles.css">
    <title>Loading HTML-CSS</title>
</head>
<body>
    <section class="contenedor-loading">
        <div class="loading"></div>
    </section>
</body>
</html>
Código CSS 
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.contenedor-loading
{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f1f1;
}

.loading
{
    width: 50px;
    height: 50px;
    border: 3px solid #999;
    border-top: 3px solid #336699;
    border-radius: 100%;
    animation: giro 1s linear infinite;
}

@keyframes giro
{
    to {
        transform: rotate(360deg);
    }
}