Comment créer un écran de chargement délicieux en 5 minutes

Tout d'abord, voici ce que nous allons construire. Réglez votre minuterie!

Cela vous semble-t-il familier?

Si oui, c'est parce que vous avez vu ça quelque part - Slack!

Apprenons quelques choses en recréant cela avec juste du CSS et du bon vieux HTML.

Si vous êtes impatient d'écrire du code, lancez-vous sur Codepen et créez un nouveau stylo.

Maintenant, allons-y!

1. Le balisage

Le balisage requis pour cela est assez simple. C'est ici:

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

Simple, hein?

Si vous ne savez pas pourquoi les noms de classe ont des tirets étranges, j'ai expliqué la raison derrière cela dans cet article.

Il y a un tas de texte et une .loading__animpériode pour «imiter» l'icône animée.

Le résultat de ceci est la vue simple ci-dessous.

2. Centrez le contenu

Le résultat n'est pas le plus joli des choses à voir. Faisons entrer l' .loadingélément de section entier dans la page.

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

Vous cherchez mieux?

3. Style du texte de chargement

Je sais. Nous reviendrons bientôt sur les animations. Pour l'instant, stylisons le .loadingtexte pour qu'il soit beaucoup mieux.

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

4. Donnez au texte de l'auteur un style légèrement différent.

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

Voilà!

5. Créez le chargeur animé

L'étape tant attendue est là. Ce sera la plus longue des étapes, car je vais passer du temps pour m'assurer que vous comprenez comment cela fonctionne.

Si vous êtes bloqué, laissez un commentaire et je serai ravi de vous aider.

Hé, regarde à nouveau le chargeur.

Vous remarquerez que la moitié de son trait est bleu et l'autre moitié est gris. D'accord, c'est réglé. De plus, les HTMLéléments ne sont pas arrondis par défaut. Tout est un élément de boîte . Le premier vrai défi sera de savoir comment donner à l' .loading__animélément des demi-frontières.

Ne vous inquiétez pas si vous ne comprenez pas encore cela. J'y reviendrai.

Tout d'abord, trions les dimensions du chargeur.

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

À l'heure actuelle, le chargeur est sur la même ligne que le texte. C'est parce que c'est un spanélément qui se trouve être un élément en HTMLligne .

Assurons-nous que le chargeur se place sur une autre ligne, c'est-à-dire qu'il commence sur une autre ligne par opposition au comportement par défaut des inlineéléments.

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

Enfin, assurons-nous que le chargeur a une bordure définie.

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

Cela donnera une bordure grisâtre5px autour de l'élément.

Maintenant, voici le résultat de cela.

Pas si génial - encore. Faisons encore mieux.

Un élément a quatre côtés, top, bottom, left, etright

La borderdéclaration que nous avons définie précédemment a été appliquée à tous les côtés de l'élément.

Pour créer le chargeur, nous avons besoin de deux côtés de l'élément pour avoir des couleurs différentes.

Peu importe les côtés que vous choisissez. J'ai utilisé les côtés topet leftci-dessous

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

Maintenant, les côtés leftet topauront une couleur bleuâtre pour leurs bordures. Voici le résultat de cela:

On arrive quelque part!

Le chargeur est rond, PAS rectangulaire. Changeons cela en donnant l' .loader__animélément a border-radiusde50%

Maintenant, nous avons ceci:

Pas si mal, hein?

La dernière étape consiste à animer cela.

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

J'espère que vous avez une idée du fonctionnement des animations CSS. 1turnest égal à 360deg, c'est-à-dire qu'un tour complet tourne à 360 degrés.

Et appliquez-le comme ceci:

animation: rotate 600ms infinite linear;

Yo! Nous l'avons fait. Est-ce que tout cela a du sens?

Au fait, voyez le résultat ci-dessous:

Assez cool, hein?

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.