چرا لودینگ های خلاقانه مهم هستند؟
در دنیای امروز که کاربران توجه کمی به محتوای آنلاین دارند، یک لودینگ خلاقانه می‌تواند تجربه کاربری را کاملاً متحول کند. نه تنها کاربران را سرگرم می‌کند، بلکه انتظار برای لود شدن محتوا را قابل تحمل‌تر می‌سازد. در این مقاله، یک لودینگ جذاب دونات پرشی را با استفاده از CSS خالص طراحی می‌کنیم.
بررسی اجمالی پروژه
لودینگی که می‌سازیم شامل:
-
یک دونات چرخان با سه لایه رنگی
-
پاشیده‌های رنگی روی دونات
-
سایه متحرک برای ایجاد حس پرش
-
افکت‌های نرم و روان
-
طراحی کاملاً ریسپانسیو
شروع کدنویسی
ساختار HTML
ابتدا ساختار اصلی HTML را ایجاد می‌کنیم:
<div class="container">
<div class="loader">
<div class="donut"></div>
<div class="sprinkles">
<div class="sprinkle"></div>
<!-- 7 sprinkle دیگر -->
</div>
</div>
<div class="jumping-shadow"></div>
<p class="loading-text">در حال لود شدن<span class="dots"></span></p>
</div>
استایل‌دهی پایه
با CSS Variables شروع می‌کنیم تا کنترل بهتری روی رنگ‌ها داشته باشیم:
:root {
--color-primary: #ff6b9d;
--color-secondary: #ffa94d;
--color-accent: #4cd9a0;
--bg-container: rgba(255, 255, 255, 0.95);
--text-color: #5a5a5a;
}
انیمیشن‌های کلیدی
سه انیمیشن اصلی نیاز داریم:
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes shadow {
0%, 100% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 0.8; }
}
@keyframes dots {
0% { content: ""; }
25% { content: "."; }
50% { content: ".."; }
75% { content: "..."; }
100% { content: ""; }
}
طراحی دونات
با استفاده از pseudo-elements یک دونات سه لایه ایجاد می‌کنیم:
.donut {
position: absolute;
width: 100%;
height: 100%;
border: 6px solid rgba(240, 240, 240, 0.9);
border-top: 6px solid var(--color-primary);
border-radius: 50%;
animation: rotate 1.5s linear infinite;
}
.donut:before {
/* لایه دوم */
border-top: 4px solid var(--color-secondary);
animation: rotate 2s linear infinite reverse;
}
.donut:after {
/* لایه سوم */
border-top: 3px solid var(--color-accent);
animation: rotate 3s linear infinite;
}
افزودن پاشیده‌های رنگی
با استفاده از nth-child، پاشیده‌های رنگی را در موقعیت‌های مختلف قرار می‌دهیم:
.sprinkle:nth-child(1) {
top: 8px;
left: 50%;
background: #ff5252;
}
/* ۷ sprinkle دیگر با موقعیت‌های مختلف */
ایجاد افکت پرش با سایه
سایه متحرک عمق و حس پرش به دونات می‌دهد:
.jumping-shadow {
width: 60px;
height: 12px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
animation: shadow 1.5s ease-in-out infinite;
}
نکات پیشرفته
-
بهینه سازی عملکرد: از transform و opacity برای انیمیشن‌ها استفاده کردیم که performance بهتری دارند.
-
قابلیت دسترسی: تضاد رنگی مناسب برای کاربران با مشکلات بینایی.
-
ریسپانسیو: استفاده از واحدهای نسبی برای سازگاری با دستگاه‌های مختلف.
جمع‌بندی
این لودینگ تنها با HTML و CSS خالص ایجاد شده و هیچ وابستگی به کتابخانه‌های خارجی ندارد. می‌توانید به راحتی آن را customizer کرده و با پروژه‌های خود ادغام کنید.
کد کامل
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لودینگ خلاقانه | CSS Loader</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #5a5a5a;
overflow: hidden;
}
.container {
text-align: center;
padding: 1.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
max-width: 90%;
width: 320px;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.loader {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}
.donut {
position: absolute;
width: 100%;
height: 100%;
border: 6px solid rgba(240, 240, 240, 0.9);
border-top: 6px solid #ff6b9d;
border-radius: 50%;
animation: rotate 1.5s linear infinite;
box-shadow: 0 0 15px rgba(255, 107, 157, 0.5);
}
.donut:before {
content: "";
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 4px solid rgba(240, 240, 240, 0.9);
border-top: 4px solid #ffa94d;
border-radius: 50%;
animation: rotate 2s linear infinite reverse;
}
.donut:after {
content: "";
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
border: 3px solid rgba(240, 240, 240, 0.9);
border-top: 3px solid #4cd9a0;
border-radius: 50%;
animation: rotate 3s linear infinite;
}
.sprinkles {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 4s linear infinite;
}
.sprinkle {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
}
.sprinkle:nth-child(1) { top: 8px; left: 50%; background: #ff5252; }
.sprinkle:nth-child(2) { top: 15px; right: 15px; background: #4cd9a0; }
.sprinkle:nth-child(3) { top: 50%; right: 8px; background: #ffd166; }
.sprinkle:nth-child(4) { bottom: 15px; right: 15px; background: #9d7cff; }
.sprinkle:nth-child(5) { bottom: 8px; left: 50%; background: #ff6b9d; }
.sprinkle:nth-child(6) { bottom: 15px; left: 15px; background: #4cc9ff; }
.sprinkle:nth-child(7) { top: 50%; left: 8px; background: #ffa94d; }
.sprinkle:nth-child(8) { top: 15px; left: 15px; background: #ff5252; }
.jumping-shadow {
width: 60px;
height: 12px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
margin: 25px auto;
animation: shadow 1.5s ease-in-out infinite;
filter: blur(4px);
}
.loading-text {
margin-top: 1.2rem;
font-size: 1rem;
font-weight: 600;
color: #5a5a5a;
}
.dots {
display: inline-block;
}
.dots::after {
content: "";
animation: dots 1.5s infinite;
}
.social-icons {
margin-top: 1.5rem;
display: flex;
justify-content: center;
gap: 15px;
}
.social-icons a {
color: #6a6a6a;
font-size: 1.2rem;
transition: color 0.3s, transform 0.3s;
}
.social-icons a:hover {
color: #ff6b9d;
transform: translateY(-3px);
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes shadow {
0%, 100% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 0.8; }
}
@keyframes dots {
0% { content: ""; }
25% { content: "."; }
50% { content: ".."; }
75% { content: "..."; }
100% { content: ""; }
}
</style>
</head>
<body>
<div class="container">
<div class="loader">
<div class="donut"></div>
<div class="sprinkles">
<div class="sprinkle"></div>
<div class="sprinkle"></div>
<div class="sprinkle"></div>
<div class="sprinkle"></div>
<div class="sprinkle"></div>
<div class="sprinkle"></div>
<div class="sprinkle"></div>
<div class="sprinkle"></div>
</div>
</div>
<div class="jumping-shadow"></div>
<p class="loading-text">در حال لود شدن<span class="dots"></span></p>
<div class="social-icons">
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</body>
</html>
سخن پایانی
امیدوارم این آموزش برایتان مفید بوده باشد. لودینگ‌های خلاقانه نه تنها کاربردی هستند، بلکه می‌توانند لحظات لذت‌بخشی برای کاربران ایجاد کنند.
نظر شما چیست؟ چه ایده‌های خلاقانه دیگری برای طراحی لودینگ دارید؟ نظرات و پیشنهادات خود را با ما به اشتراک بگذارید.
آخرین دیدگاه ها