Crea una cuenta o inicia sesión

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

Maquetación del loader

3/12
Recursos

Aportes 15

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

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

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.

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

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


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 😄