Skelettskärmar är en integrerad del av besöksbevarandet i moderna designtrender. De skapar en illusion av hastighet och hanterar användarnas förväntningar genom att hålla dem informerade om statusen för en sidas innehåll. En av de mest väsentliga men underskattade lösningarna som skelettskärmar erbjuder är deras hjälp med att undvika Cumulative Layout Shift (CLS), vilket tillåter innehåll att visas på en gång snarare än sekventiellt när det laddas.
Är du redo att göra dina gränssnitt mer intuitiva och uttrycksfulla genom att implementera skelettskärmar i dina egna projekt? Så här kommer du igång.
Att designa en webbsidalayout hjälper dig att kristallisera dina förväntningar. Du bör sätta ditt mål, definiera layouten, lägga till eventuella sidor som krävs och göra den tillgänglig och responsiv för olika skärmstorlekar. För nu, överväg en enkel design med en omslagsbild, profilbild, lite text och uppmaningsknappar.
När du har ritat utformningen av layouten, antingen med hjälp av papper eller en app som Figma eller Adobe XD, är det dags att förbereda HTML-strukturen.
Notera: Glöm inte att länka CSS- och JavaScript-filerna i rubriken på din index.html fil.
<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="https://ipotek.net/hur-man-skapar-en-skelettskarmsladdningseffekt-i-html-css-och-javascript/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="https://ipotek.net/hur-man-skapar-en-skelettskarmsladdningseffekt-i-html-css-och-javascript/./image/linkedin banner.jpg">
</div>
<div class="profile-img skeleton">
<img src="https://ipotek.net/hur-man-skapar-en-skelettskarmsladdningseffekt-i-html-css-och-javascript/./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="https://ipotek.net/">Contact info</a></h5>
<p class="skeleton"><a class="skeleton" href="https://ipotek.net/">534 connections</a></p>
</div>
<div class="profile-cta">
<a class="message-btn skeleton" href="https://ipotek.net/">Message</a>
<a class="more-btn skeleton" href="https://ipotek.net/">More</a>
</div>
</div>
<script src="https://ipotek.net/hur-man-skapar-en-skelettskarmsladdningseffekt-i-html-css-och-javascript/script.js"></script>
</body>
Börja styla din sida
Använd de grundläggande CSS-attributen som marginal, typsnittsfamilj, och Färg över hela kroppen.
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
Lägg till laddningseffekt
För att lägga till en laddningseffekt, lägg till en ::efter pseudo-element till skelettklassen som rör sig från vänster (-100 %) till höger (100 %) över en sekund eller två, vilket resulterar i en skimrande animering.
.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%);
}
}
Style bilderna
Låt oss nu styla profilen och omslagsbilden. Glöm inte att ställa in overflow: gömd; för att undvika inkonsekvenser.
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;
}
Gör det responsivt
För att se till att din design är responsiv på olika skärmar, använd mediefrågor i enlighet med detta. Om du är nybörjare inom webbutveckling bör du lära dig hur du använder mediefrågor i HTML och CSS eftersom de är superviktiga när du bygger responsiva webbplatser.
@media (max-width: 560px) {
.profile-img {
width: 100px;
height: 100px;
bottom: 60px;
}
}
Style texten
Style texten genom att ställa in a marginal, textstorlek, och teckensnittsvikt. Du kan också ändra textfärgen, lägga till en rubrik, ett stycke eller ett ankare tagga enligt dina preferenser. Att lägga till en svävningseffekt till ankartaggen är användbart eftersom det låter användaren veta om en länk.
.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;
}
Style CTA
En uppmaning till handling (CTA) är viktig eftersom du i allmänhet vill konvertera dina användares besök på något sätt. Genom att ge den en lätt märkbar färg kommer din CTA att sticka ut på sidan.
.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;
}
Produktion:
Stäng av skelettladdningseffekt med JavaScript
Nu när du har lagt till den ledande effekten med CSS, är det dags att stänga av den med JavaScript. Animeringen kommer att upprepas ett oändligt antal gånger som standard, men du vill att den bara ska köras i några sekunder. Du kan ställa in tiden till 4000 millisekunder med setTimeout. Det tar bort skelettklassen från alla element efter 4 sekunder.
Notera: Se till att lägga till strax före slutet av
const skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((skeleton) => {
setTimeout(() => {
skeleton.classList.remove('skeleton')
}, 4000)
})
Produktion:
Vad är JavaScript och hur fungerar det?
Du har framgångsrikt skapat en skelettskärmsladdningseffekt med HTML, CSS och JavaScript. Nu, när någon begär nytt innehåll från servern, kan du visa skelettskärmens laddningseffekt medan data laddas. Det blir mer av en populär designtrend, eftersom du kan se det på sajter som Google, Facebook och Slack.
Under tiden, om du är ny på JavaScript, kan du lära dig grunderna genom att förstå JavaScript och hur det interagerar med HTML och CSS.
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
