Rumah >hujung hadapan web >tutorial css >Cara membuat Skeleton Loader dengan CSS dan meningkatkan UX apl anda
Cara membuat Skeleton Loader dengan CSS dan meningkatkan UX apl anda
- DDDasal
- 2025-01-24 06:07:10788semak imbas
Berikan sentuhan profesional pada tapak web anda dengan pemuat rangka! Jika anda bekerja dalam pembangunan bahagian hadapan, lupakan pemutar pemuatan yang membosankan. Pemuat rangka menawarkan pengalaman pengguna yang lebih menarik dan cekap. Dalam tutorial ini, anda akan belajar cara menciptanya dengan mudah menggunakan HTML dan CSS, tanpa memerlukan perpustakaan luaran.
? Keputusan Akhir
Sebelum bermula, di sini kami tunjukkan hasil yang akan kami perolehi:
Kad yang menyerupai pemuatan imej, tajuk dan perenggan teks. Ringkas, tetapi dengan rupa yang elegan dan profesional.
? Kelebihan Skeleton Loader
- Sensasi kelajuan yang lebih hebat: Pengguna melihat perwakilan kandungan semasa ia dimuatkan, tidak seperti pemutar mudah.
- Reka bentuk yang lebih canggih: Menyediakan pratonton kandungan, mengelakkan perasaan bahawa aplikasi telah gagal.
- Pelaksanaan yang mudah: Dicipta dengan CSS tulen, tanpa kerumitan tambahan.
✍️ Mari mula bekerja: Mencipta Pemuat
Kami akan mencipta pemuat yang meniru kad dengan imej, tajuk dan teks.
1. Struktur HTML Asas
Mulakan dengan mencipta fail HTML dengan struktur berikut:
<code class="language-html"><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton Loader</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<!-- Contenido del loader aquí -->
</div>
<script src="script.js"></script> </body>
</html></code>
2. Gaya CSS
Buat fail styles.css dengan kod CSS berikut:
<code class="language-css">body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.card {
width: 300px;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.skeleton {
background-color: #e0e0e0;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.skeleton::before {
content: '';
display: block;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.skeleton.image {
width: 100%;
height: 150px;
margin-bottom: 16px;
}
.skeleton.title {
width: 70%;
height: 20px;
margin-bottom: 12px;
}
.skeleton.text {
width: 100%;
height: 14px;
margin-bottom: 8px;
}</code>
3. Penjelasan CSS
- Warna dan jidar: Kelabu muda (#e0e0e0) dan tepi bulat digunakan untuk mensimulasikan elemen sebenar.
-
Kesan Kilauan:
linear-gradientmencipta kesan cahaya animasi dengan@keyframes shimmer. - Perkadaran realistik: Dimensi setiap elemen (imej, tajuk, teks) ditakrifkan supaya ia menyerupai kandungan sebenar.
4. Tunjukkan kandungan sebenar (pilihan)
Untuk memaparkan kandungan sebenar selepas beberapa ketika, tambah kod JavaScript ini dalam fail script.js:
<code class="language-javascript">setTimeout(() => {
document.querySelector('.card').innerHTML = `
<img src="https://via.placeholder.com/300x150" alt="Imagen de ejemplo">
<h3>Título del contenido</h3>
<p>Este es un texto de ejemplo para la tarjeta.</p>
`;
}, 3000); // Simula una carga de 3 segundos</code>
Dalam elemen .card dalam HTML anda, tambahkan kelas .skeleton, .skeleton.image, .skeleton.title dan .skeleton.text yang sesuai untuk setiap elemen yang anda mahu paparkan sebagai pemuat.
? Kesimpulan
Pemuat rangka ialah cara yang mudah dan berkesan untuk meningkatkan pengalaman pengguna, memberikan kesan kelajuan dan profesionalisme kepada aplikasi anda. Cuba dalam projek anda!
Atas ialah kandungan terperinci Cara membuat Skeleton Loader dengan CSS dan meningkatkan UX apl anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!