Maquetación del loader

Curso Práctico de Maquetación y Animaciones con CSS

Visión general y requisitos del curso

Hagamos un landing con super poderes CSS

Estructura del proyecto

Maquetación y animaciones con CSS

Maquetación del loader

Layout con CSS Grid

Navbar

Contenido principal

Contenido lateral

Footer

Maquetación con JavaScript

Cómo acceder al DOM con JavaScript

Modal: evento click con JavaScript

Slider

Continúa aprendiendo

¿Quieres aprender animaciones con JavaScript?

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Recursos

Aportes 22

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fabian Flores

hace 4 años

Cambié un poco los keyframes y ya se ve un poco más fluida la animación

Luis Alejandro Vera Hernandez

hace 3 años

HTML + CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height:100vh;
            margin:0;
            overflow:hidden; /* hace que lo que esta dentro del body no sobresalga */
        }

        
        .page {
            position: relative;
            height: 100vh;
        }
        
        .container{
            z-index:1;
            position: absolute;
        }

        .loader {
            background: pink;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 3;

            animation: loader 10s linear forwards;

        }

        
        @keyframes loader {
            0%{
                opacity: 1;
                visibility: visible;
            }
            
            95%{
                opacity: 1;
                visibility: visible;
            }
            
            100%{
                opacity: 0;
                visibility: hidden;
            }
        }

        .loader div {
            background: yellowgreen;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 20px; 

            transform: scale(0);

            animation: scaling 1500ms ease-in-out infinite;
        }

        .loader div:nth-child(1){
            animation-delay: 0.2s;
        }
        .loader div:nth-child(2){
            animation-delay: 0.4s;
        }
        .loader div:nth-child(3){
            animation-delay: 0.6s;
        }

        @keyframes scaling {
            0%, 100%{
                transform: scale(1.3);
            }
            50%{
                transform: scale(.8);
            }
            
        }


        </style>
</head>
<body>
    <div class="page">
        <!-- Main Content -->
        <section class="container">
            <nav class="navbar">
                <div class="navbar__content">
                    <img src="" alt="">
                    <ul>
                        <li><a href="#">EXCLUSIVOS</a></li>
                        <li><a href="#">NUEVOS</a></li>
                        <li><a href="#">GIFT CARDS</a></li>
                        <li><a href="#">FIND A STORE</a></li>
                    </ul>
                </div>
            </nav>
             <section class="main-content">
                 <!-- <p>Diseña tu</p>
                 <h1>Súper Héroe!</h1> -->
                 <h1><span>Diseña tu</span> Súper Héroe!</h1>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum alias molestiae illum pariatur itaque numquam, ab voluptates modi nisi cumque magni ad possimus voluptatibus repudiandae dicta laudantium natus fugiat laboriosam?</p>
             </section>
             <section class="side-content">
                <p>Superman</p>
                <img src="" alt="">
                <div></div>
             </section>
             <section>
                 <div>
                     <img src="" alt="">
                 </div>
                 <div>
                    <img src="" alt="">
                </div>
                <div>
                    <img src="" alt="">
                </div>
             </section>
        </section>
         <!-- Loader -->
         <section class="loader">
             <div></div>
             <div></div>
             <div></div>
         </section>
        <!-- Modal -->
        <section></section>
    </div>
</body>
</html>

Carlos Rodríguez

hace 3 años

Sin necesidad de posicionar relativamente a los demás contenedores he colocado un position fixed con posición expandida al loader

.loader {
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 3;
}

Russel Adrian Bonilla Pech

hace 4 años

Recomendación: Vean primero los cursos de programación básica o vengan con algo de conocimiento o si no se les va a dificultar entender este curso.

Camilo Esteban Mora Paez

hace 3 años

Por si alguien le interesa así se vería con Sass, lo estoy aprendiendo se que se podrían mejorar algunas cosas.

$heigth : 100vh;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  height: $heigth;
  overflow: hidden;
}

.page {
  position: relative;
  height: $heigth;
}

.root {
  position: absolute;
  z-index: 1;
}

.loader {
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  animation: loader 3s linear forwards;
  gap: 15px;

  div {
    background-color: lightpink;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: scale(0);
    animation: scaling 2s ease-in-out infinite;
    &:nth-child(1) {
      animation-delay: 0.1s;
    }
    &:nth-child(2) {
      animation-delay: 0.3s;
    }
    &:nth-child(3) {
      animation-delay: 0.5s;
    }
  }
}

@keyframes loader {
  0% {
    opacity: 1;
    visibility: visible;
  }

  95% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes scaling {

  0% {
    transform: scale(0); 
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.2);
  }
}

Fabián Andrés Pacherres Bautista

hace 3 años

Antes de esta clase, no entendía mucho para que serviría el animation-delay pero ahora se me abrió la mente, gracias
me gusto la clase

Paolo Joaquin Pinto Perez

hace 4 años

Maquetación del Loader

Código: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/3-maquetacion-loader
Me gusto el método que útilizo la profesora para hacer la animacion del scaling. Utilizando keyframes, ya se empiezan a aplicar los conceptos de cursos anteriores 😄

Pipe Ll

hace 3 años

Como hacer una animación sencilla pero agradable, lo mejor sin librerias, genial!! 🤩🤩

Sebastian Moreno Olivera

hace 3 años

Maquetación del loader

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.page {
    position: relative;
    height: 100vh;
}

.container {
    position: absolute;
    z-index: 1;
}

/* animacion del cargue de pantalla */
.loader {
    background: aqua;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;

    animation: loader 2.3s linear forwards;
}
@keyframes loader {
    0% {
        opacity: 1;
        visibility: visible;
    }
    95% {
        oppacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
/* Para crear esferas de cargar se ve genial */
.loader div {
    background: white;
    width: 40px;
    height: 40px;
    border-radius:50%;
    margin: 10px;
    transform: scale(0);

    animation: scaling 2.3s ease-in-out infinite;
}

.loader div:nth-child(1) {
    animation-delay: 0.2s;
}
.loader div:nth-child(2) {
    animation-delay: 0.4s;
}
.loader div:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes scaling {
    0%, 100%, {
        transform: scale(0.2);
    }
    40% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
}

BEATA ALEKSIEJUK

hace 3 años

Keyframes ayudan mucho.
Muy interesante era aprender con este clase como hacer un loader. No sabia que se puede hacerlo en una manera tan rapida.
Tambien informacion que se puede usar child y animation-delay para animaciones es muy util.

Moises Lara

hace 3 años

Profe, que crack estoy fascinado como algo simple puede dar una gran vista con la animación

Andrés Medina

hace 3 años

Excelente clase ❤️

Santiago Gustavo López Bernal

hace 3 años

Estoy comenzando y aún me cuesta entender el por qué de cada cosa. Pero lo iré aprendiendo.

EULOGIO MENDIETA

hace 10 días

Es posible poner HTML y CSS en una sola hoja, lo que se conoce como "en línea". Esto puede ser útil para proyectos pequeños o pruebas rápidas. Sin embargo, en proyectos más grandes y profesionales, es recomendable mantener HTML y CSS en archivos separados. Esto facilita la organización, el mantenimiento y la reutilización del código. La separación también mejora la carga del sitio y la colaboración con otros desarrolladores. Es un principio clave en el desarrollo web moderno.

Miguel Angel Echeverri Alvarez

hace 10 meses

Yo lo deje así, la verdad me gusto más como quedo la animación


@keyframes scaling {
    0%,100% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.6);
    }

    50% {
        transform: scale(1);
    }

    80% {
        transform: scale(.2);
    }
    
}

Talia Aldana Rodrigues

hace un año

Hola Me encanta las clases, mucha practica y explica muy bien []Muestro el loder como quedo

![](

Mateo Roldán

hace 2 años

Decidi cambiar la propiedad que utilizo la profe para la animación de el loader, en vez de visibility: hidden; utilice una propiedad que me gusta más y usa menos recursos al renderizarse y es pointer-events: none; quedo algo así:

@keyframes loader {
    0% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

Milagros Fortis

hace 2 años

Decidi cambiarle el delay a los div para que se pueda notar mas la transicion y quedaría así:

.loader div:nth-child(1) {
    animation-delay: 0.4s;
}
.loader div:nth-child(2) {
    animation-delay: 0.6s;
}
.loader div:nth-child(3) {
    animation-delay: 0.8s;

Me encanta este curso 😄

Rubén Ernesto Aragón Gil

hace 2 años

Está quedando suave

marco antonio

hace 2 años

asi me queda

Jhoana España Urresty

hace 3 años

super!!

.loader div{
  background: blue;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;

  transform: scale(0);

  animation: scaling 1s ease-in-out infinite;
}

/* La pseudo-clase :nth-child() de CSS coincide con uno o más elementos en función de su posición entre un grupo de hermanos. */
.loader div:nth-child(1){
  animation-delay: 0.1s;
}
.loader div:nth-child(2){
  animation-delay: 0.2s;
}
.loader div:nth-child(3){
  animation-delay: 0.3s;
}
@keyframes scaling{
  0%, 100%{
    transform: scale(0.2);
  }
  40%{
    transform: scale(1);
  }
  50%{
    transform: scale(1);
  }
}

Obed Paz

hace 3 años

Tan facil y uno buscando librerias para loaders jajajaj