Crea una cuenta o inicia sesión

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

Aprende Inglés, Programación, AI, Ciberseguridad y mucho más.

Antes: $249

Currency
$209
Suscríbete

Termina en:

5 Días
10 Hrs
14 Min
25 Seg

Maquetación del loader

3/12
Recursos

Aportes 21

Preguntas 6

Ordenar por:

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

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

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>

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;
}

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.

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);
  }
}

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

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 😄

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

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);
    }
}


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.

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

Excelente clase ❤️

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

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);
    }
    
}

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

![](

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;
    }
}

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 😄

Está quedando suave


 
asi me queda
 

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);
  }
}

Tan facil y uno buscando librerias para loaders jajajaj