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 pour éviter le décalage de mise en page cumulatif (CLS), permettant au contenu de s’afficher en une seule fois plutôt que de manière séquentielle lors de son chargement.
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, 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. MAKEUSEDE LA VIDÉO DU JOURNoter: N’oubliez pas de lier les fichiers CSS et JavaScript dans l’entête de votre index.html déposer.
<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" />
<link rel="stylesheet" href="style.css" />
<title>Skeleton Screen Loading Effect</title>
</head>
<body>
<div class="profile-container">
<div class="profile-images">
<div class="cover-img skeleton">
<img src="./image/linkedin banner.jpg">
</div>
<div class="profile-img skeleton">
<img src="./image/user-profile.jpg" alt="Photo by Ian Dooley on Unsplash">
</div>
</div>
<div class="profile-text">
<h1 class="skeleton">John Doe</h1>
<p class="skeleton">Software Engineer @ Google || Full Stack Developer || Self Taught</p>
<h5 class="skeleton">Bengaluru, Karnataka, India • <a class="skeleton" href="/">Contact info</a></h5>
<p class="skeleton"><a class="skeleton" href="/">534 connections</a></p>
</div>
<div class="profile-cta">
<a class="message-btn skeleton" href="/">Message</a>
<a class="more-btn skeleton" href="/">More</a>
</div>
</div>
<script src="script.js"></script>
</body>
Commencez à styliser votre page
Appliquez les attributs CSS de base comme marge, famille de polices, et Couleur sur tout le corps.
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
Ajouter un effet de chargement
Pour ajouter un effet de chargement, ajoutez un ::après pseudo-é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.
.skeleton {
position: relative;
width: max-content;
overflow: hidden;
border-radius: 4px;
background-color: #1e2226 !important;
color: transparent !important;
border-color: #1e2226 !important;
user-select: none;
cursor: default;
}.skeleton img {
opacity: 0;
}
.skeleton::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
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: shimmer 2s infinite;
content: '';
}
@keyframes shimmer {
100% {
transform: 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 {
width: 100%;
vertical-align: middle;
}.profile-container {
width: 95%;
max-width: 780px;
margin: 0 auto;
border-radius: 8px;
margin-top: 32px;
background-color: #1e2226;
overflow: hidden;
position: relative;
}
.cover-img {
width: 100%;
overflow: hidden;
background-color: #1e2226;
aspect-ratio: 4 / 1;
}
.profile-img {
border-radius: 50%;
width: 160px;
height: 160px;
border: 4px solid #000;
background-color: #1e2226;
margin: 0 auto;
position: relative;
overflow: hidden;
bottom: 100px;
}
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 (max-width: 560px) {
.profile-img {
width: 100px;
height: 100px;
bottom: 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-text {
margin-top: -80px;
padding: 0 16px;
}.profile-text h1 {
margin-bottom: 0;
font-size: 24px;
overflow: hidden;
}
.profile-text p {
margin: 4px 0;
overflow: hidden;
}
.profile-text h5 {
margin-top: 4px;
font-size: 14px;
margin-bottom: 8px;
font-weight: 400;
color: #ffffff99;
overflow: hidden;
}
.profile-text a {
color: #70b5f9;
font-size: 14px;
text-decoration: none;
font-weight: 600;
}
.profile-text a:hover {
color: #70b5f9;
text-decoration: underline;
}
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 {
padding: 16px 16px 32px;
display: flex;
}
.profile-cta a {
padding: 6px 16px;
border-radius: 24px;
text-decoration: none;
display: block;
}.message-btn {
background-color: #70b5f9;
color: #000;
}
.more-btn {
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.9);
margin-left: 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 skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((skeleton) => {
setTimeout(() => {
skeleton.classList.remove('skeleton')
}, 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.
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
Naïf Mourya
(18 articles publiés)
Naincy se spécialise dans la création de sites Web hautement réactifs et d’une stratégie de contenu efficace ainsi que dans des copies Web. Elle est une rédactrice technique indépendante qui garde un œil attentif sur les technologies tendances.
Plus de Naincy Mourya
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner
— to www.makeuseof.com
Jeu de briques
Snake
Pacman
Bubble