Les écrans squelettes font partie intégrante de la rétention des visiteurs dans les tendances du design moderne. Ils créent une illusion de vitesse et gèrent les attentes des utilisateurs en les tenant informés de l'état du contenu d'une page. L'une des solutions les plus essentielles mais sous-estimées offertes par les écrans squelettes est leur aide à éviter Cumulative Layout Shift (CLS), permettant au contenu de s'afficher en une seule fois plutôt que de manière séquentielle. charges.

Prêt à rendre vos interfaces plus intuitives et expressives en implémentant des écrans squelettes dans vos propres projets? Voici comment commencer.

Concevoir la mise en page Web

Concevoir une mise en page Web vous aide à cristalliser vos attentes. Vous devez définir votre objectif, définir la mise en page, ajouter les pages requises et le rendre accessible et réactif pour différentes tailles d'écran. Pour l'instant, envisagez une conception simple avec une image de couverture, une image de profil, un peu de texte et des boutons d'appel à l'action.

Une fois que vous avez rédigé la conception de la mise en page, que ce soit en utilisant du papier ou une application comme Figma ou Adobe XD, il est temps de préparer la structure HTML.

Construire la structure de base

Créer un nouveau fichier index.html et écrivez du HTML pour la mise en page à l'intérieur d'un parent avec class="conteneur-profil". Ajouter classe = "squelette" à chaque élément afin d'appliquer l'effet de chargement d'écran squelette. Vous supprimerez cette classe lorsque le contenu sera chargé à l'aide de JavaScript.

Noter: N'oubliez pas de lier les fichiers CSS et JavaScript dans l'entête de votre index.html déposer.

John Doe

Ingénieur logiciel @ Google || Développeur Full Stack || Autodidacte

Bangalore, Karnataka, Inde • Informations de contact


534 connexions






Message
Suite

Commencez à styliser votre page

Appliquez les attributs CSS de base comme marge, famille de polices, et Couleur sur tout le corps.

corps {
 marge: 0 ;
 famille de polices: Arial ;
 couleur: rgba (255, 255, 255, 0.9) ;
}

Ajouter un effet de chargement

Pour ajouter un effet de chargement, ajoutez un ::aprèspseudo-élément à la classe squelette qui se déplace de la gauche (-100 %) vers la droite (100 %) en une seconde ou deux, ce qui donne une animation chatoyante.

.squelette {
 position: relative ;
 largeur: contenu maximal ;
 débordement caché;
 rayon de bordure: 4px ;
 background-color: #1e2226 !important;
 couleur: transparent !important;
 border-color: #1e2226 !important;
 sélection par l'utilisateur: aucun ;
 curseur: par défaut ;
}
.squelette img {
 opacité: 0 ;
}
.squelette:: après {
 position: absolue ;
 haut: 0 ;
 à droite: 0 ;
 bas: 0 ;
 à gauche: 0 ;
 transformer: translateX(-100 %);
 background-image: linear-gradient(
 90 degrés,
 rgba (255, 255, 255, 0) 0,
 rgba (255, 255, 255, 0,2) 20 %,
 rgba (255, 255, 255, 0,5) 60%,
 rgba (255, 255, 255, 0)
 );
 animation: miroitement 2s infini ;
 contenu: '';
}
@images clés miroiter {
 100% {
 transformer: translateX(100%);
 }
}

Stylisez les images

Maintenant, stylisons le profil et l'image de couverture. N'oubliez pas de régler débordement caché; pour éviter toute incohérence.

img {
 largeur: 100 % ;
 alignement vertical: milieu ;
}
.profile-conteneur {
 largeur: 95 % ;
 largeur maximale: 780 px ;
 marge: 0 automatique ;
 rayon de bordure: 8px ;
 marge supérieure: 32 px ;
 couleur de fond: #1e2226 ;
 débordement caché;
 position: relative ;
}
.cover-img {
 largeur: 100 % ;
 débordement caché;
 couleur de fond: #1e2226 ;
 rapport d'aspect: 4 / 1 ;
}
.profile-img {
 rayon de bordure: 50 % ;
 largeur: 160px ;
 hauteur: 160px ;
 bordure: 4px solide #000 ;
 couleur de fond: #1e2226 ;
 marge: 0 automatique ;
 position: relative ;
 débordement caché;
 en bas: 100 pixels ;
}

Rendez-le réactif

Pour vous assurer que votre conception est réactive sur différents écrans, appliquez des requêtes multimédias en conséquence. Si vous êtes débutant en développement Web, vous devriez apprendre comment utiliser les requêtes multimédias en HTML et CSS car ils sont très importants lors de la création de sites Web réactifs.

@media (largeur max: 560px) {
 .profile-img {
 largeur: 100 pixels ;
 hauteur: 100px ;
 bas: 60px ;
 }
}

Styliser le texte

Stylisez le texte en définissant un marge, taille de police, et police-poids. Vous pouvez également modifier la couleur du texte, ajouter un titre, un paragraphe ou une ancre tag selon vos préférences. L'ajout d'un effet de survol à la balise d'ancrage est utile car il permet à l'utilisateur de connaître un lien.

.profile-texte {
 marge supérieure: -80px ;
 remplissage: 0 16px ;
}
.profile-texte h1 {
 marge inférieure: 0 ;
 taille de la police: 24 px ;
 débordement caché;
}
.profile-texte p {
 marge: 4px 0 ;
 débordement caché;
}
.profile-texte h5 {
 marge supérieure: 4px ;
 taille de la police: 14px ;
 marge inférieure: 8px ;
 poids de police: 400 ;
 couleur: #ffffff99 ;
 débordement caché;
}
.profile-text a {
 couleur: #70b5f9 ;
 taille de la police: 14px ;
 texte-décoration: aucun ;
 font-weight: 600 ;
}
.profile-text a: survolez {
 couleur: #70b5f9 ;
 texte-décoration: soulignement ;
}

Stylisez le CTA

Un appel à l'action (CTA) est important car vous souhaiterez généralement convertir les visites de vos utilisateurs d'une manière ou d'une autre. Lui donner une couleur facilement perceptible aidera votre CTA à se démarquer sur la page.

.profile-cta {
 remplissage: 16px 16px 32px ;
 affichage: flexible ;
}
.profile-cta a {
 rembourrage: 6px 16px ;
 rayon de bordure: 24 px ;
 texte-décoration: aucun ;
 bloc de visualisation;
}
.message-btn {
 couleur d'arrière-plan: #70b5f9 ;
 couleur: #000 ;
}
.more-btn {
 couleur: hériter ;
 bordure: 1px rgba solide (255, 255, 255, 0,9);
 marge gauche: 8px ;
}

Sortir:

Désactiver l'effet de chargement du squelette à l'aide de JavaScript

Maintenant que vous avez ajouté l'effet principal à l'aide de CSS, il est temps de le désactiver à l'aide de JavaScript. L'animation se répétera un nombre infini de fois par défaut, mais vous voulez qu'elle ne s'exécute que pendant quelques secondes. Vous pouvez régler l'heure à 4000 millisecondes en utilisant setTimeout. Cela supprimera la classe squelette de tous les éléments après 4 secondes.

Noter: Assurez-vous d'ajouter juste avant la fin de la section.

const squelettes = document.querySelectorAll('.squelette')
squelettes.forEach((squelette) => {
 setTimeout(() => {
squelette.classList.remove('squelette')
 }, 4000)
})

Sortir:

Qu'est-ce que JavaScript et comment ça marche ?

Vous avez créé avec succès un effet de chargement d'écran squelette en utilisant HTML, CSS et JavaScript. Désormais, chaque fois que quelqu'un demande un nouveau contenu au serveur, vous pouvez afficher l'effet de chargement de l'écran squelette pendant le chargement des données. Cela devient de plus en plus une tendance de design populaire, comme vous pouvez le voir sur des sites comme Google, Facebook et Slack.

Pendant ce temps, si vous débutez avec JavaScript, vous pouvez apprendre les bases en comprenant JavaScript et comment il interagit avec HTML et CSS.

Qu'est-ce que JavaScript et comment ça marche ?

Si vous apprenez le développement Web, voici ce que vous devez savoir sur JavaScript et son fonctionnement avec HTML et CSS.

Lire la suite

A propos de l'auteur