Cómo construir una pantalla de carga encantadora en 5 minutos

Primero, esto es lo que construiremos. ¡Configura tu temporizador!

¿Te parece familiar?

Si es así, es porque lo has visto en alguna parte: ¡Slack!

Aprendamos algunas cosas recreando esto con solo CSS y un buen HTML.

Si está emocionado por escribir código, acceda a Codepen y cree un nuevo lápiz.

¡Ahora vámonos!

1. El marcado

El marcado requerido para esto es bastante simple. Aquí está:

For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme
 - Your friends at Slack; 

Simple, ¿eh?

Si no está seguro de por qué los nombres de las clases tienen guiones extraños, le expliqué la razón detrás de eso en este artículo.

Hay un montón de texto y un .loading__animlapso para "hacerse pasar" por el icono animado.

El resultado de esto es la vista simple a continuación.

2. Centrar el contenido

El resultado no es el más bonito de todo para la vista. Ingresemos todo el .loadingelemento de la sección en la página.

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

¿Te ves mejor?

3. Aplicar estilo al texto de carga

Lo sé. Pronto llegaremos a las cosas animadas. Por ahora, diseñemos el .loadingtexto para que se vea mucho mejor.

.loading { max-width: 50%; line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center;}

4. Diseñe el texto del autor para que se vea ligeramente diferente.

.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block;}

¡Ahí tienes!

5. Crea el cargador animado

El paso tan esperado está aquí. Este será el paso más largo, porque dedicaré algo de tiempo a asegurarme de que comprenda cómo funciona.

Si te quedas atascado, deja un comentario y estaré encantado de ayudarte.

Oye, vuelve a echar un vistazo al cargador.

Notarás que la mitad de su trazo es azul y la otra mitad es gris. Está bien, eso está resuelto. Además, los HTMLelementos no están redondeados de forma predeterminada. Todo es un elemento de caja . El primer desafío real será cómo darle al .loading__animelemento medias fronteras.

No se preocupe si aún no comprende esto. Volveré a eso.

Primero, clasifiquemos las dimensiones del cargador.

.loading__anim { width: 35px; height: 35px; }

En este momento, el cargador está en la misma línea que el texto. Eso es porque es un spanelemento que resulta ser un elemento en HTMLlínea .

Asegurémonos de que el cargador se asienta en otra línea, es decir, comienza en otra línea en oposición al comportamiento predeterminado de los inlineelementos.

.loading__anim { width: 35px; height: 35px; display: inline-block; }

Finalmente, asegurémonos de que el cargador tenga algunos bordes establecidos.

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); }

This will give a greyish 5px border around the element.

Now, here’s the result of that.

Not so great — yet. Let’s make this even better.

An element has four sides, top, bottom,left, and right

The border declaration we set earlier was applied to all the sides of the element.

To create the loader, we need two sides of the element to have different colors.

It doesn’t matter what sides you choose. I have used the top and left sides below

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); }

Now, the left and top sides will have a blueish color for their borders. Here’s the result of that:

We’re getting somewhere!

The loader is round, NOT rectangular. Let’s change this by giving the .loader__anim element a border-radius of 50%

Now we have this:

Not so bad, huh?

The final step is to animate this.

@keyframes rotate { to { transform: rotate(1turn) }}

Hopefully, you have an idea of how CSS animations work. 1turn is equal to 360deg , that is a complete turn rotates 360 degrees.

And apply it like this:

animation: rotate 600ms infinite linear;

Yo! We did it. Does that all make sense?

By the way, see the result below:

Pretty cool, huh?

If any of the steps confused you, drop a comment and I’ll be happy to help.

Ready to become Pro?

I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook.