ساخت لوودر دایره‌ای زیبا با CSS — آموزش گام به گام + کد کامل

در این مقاله، یک انیمیشن لوودینگ (Loading) زیبا و حرفه‌ای شبیه به لوودینگ‌های مدرن (مانند Google) را با استفاده از فقط HTML و CSS خواهیم ساخت. این لوودر از چند نقطه کوچک تشکیل شده که به صورت دایره‌ای دور یک محور می‌چرخند و تدریجاً ظاهر و ناپدید می‌شوند — همراه با متن “Loading…” که با افکت fade می‌درخشد.

این مقاله مناسب توسعه‌دهندگان وب مبتدی و متوسط است و تمام مراحل را گام به گام و خط به خط توضیح می‌دهد.

<div class="loader">
    <div class="dots-container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <div class="loading-text">Loading...</div>
</div>

توضیح ساختار:

• loader: کانتینر اصلی که شامل دایره نقطه‌ها و متن است.
• dots-container: یک کادر 120×120 پیکسلی که نقطه‌ها داخل آن می‌چرخند.
• dot: هر یک از ۵ نقطه کوچک که انیمیشن می‌گیرند.
• loading-text: متنی که زیر دایره نمایش داده می‌شود.

استایل‌دهی با CSS

حالا به سراغ CSS می‌رویم. تمام استایل‌ها را به ترتیب توضیح می‌دهیم.

۱. تنظیمات کلی (* و body)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

• *: تمام عناصر را ریست می‌کند (حذف حاشیه و پدینگ پیش‌فرض).
• body: با استفاده از flexbox، محتوا را دقیقاً در وسط صفحه قرار می‌دهد.
• min-height: 100vh: اطمینان از پوشش تمام ارتفاع صفحه.
• overflow: hidden: جلوگیری از اسکرول ناخواسته به دلیل انیمیشن.

۲. کانتینر اصلی لوودر

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

• flex-direction: column: المان‌ها را به صورت عمودی چیده می‌شود (اول دایره، بعد متن).
• align-items: center: محتوا را در مرکز افقی نگه می‌دارد.
• gap: 20px: فاصله بین دایره و متن.

۳. کانتینر نقطه‌ها

.dots-container {
    position: relative;
    width: 120px;
    height: 120px;
}

• position: relative: نقطه مرجع برای موقعیت‌یابی dotها.
• ابعاد 120×120px برای ایجاد فضای کافی جهت چرخش نقطه‌ها.

۴. نقطه‌های متحرک

.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #4285f4;
    border-radius: 50%;
    transform-origin: 60px 60px;
    animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

توضیحات مهم:

• position: absolute: نقطه‌ها نسبت به dots-container جابجا می‌شوند.
• top: 50%; left: 50%: نقطه شروع هر dot در مرکز کانتینر است.
• border-radius: 50%: تبدیل به دایره.
• transform-origin: 60px 60px: مرکز چرخش را روی مرکز کانتینر تنظیم می‌کند (چون 120px / 2 = 60px).
• animation: spin ...: انیمیشن اصلی چرخش را اعمال می‌کند.

۵. تنظیم اندازه و رنگ هر نقطه

.dot:nth-child(1) {
    animation-delay: -0.1s;
    background-color: rgba(66, 133, 244, 0.3);
    width: 6px;
    height: 6px;
}

.dot:nth-child(2) {
    animation-delay: -0.2s;
    background-color: rgba(66, 133, 244, 0.5);
    width: 7px;
    height: 7px;
}

.dot:nth-child(3) {
    animation-delay: -0.3s;
    background-color: rgba(66, 133, 244, 0.7);
    width: 8px;
    height: 8px;
}

.dot:nth-child(4) {
    animation-delay: -0.4s;
    background-color: rgba(66, 133, 244, 0.9);
    width: 9px;
    height: 9px;
}

.dot:nth-child(5) {
    animation-delay: -0.5s;
    width: 10px;
    height: 10px;
}

• با استفاده از :nth-child، به هر نقطه اندازه و شفافیت متفاوتی می‌دهیم.
• animation-delay باعث می‌شود نقطه‌ها یکی پس از دیگری وارد چرخش شوند و افکت موج‌وار ایجاد شود.
• رنگ اصلی #4285f4 همان رنگ آبی معروف Google است.

۶. انیمیشن چرخش (@keyframes spin)

@keyframes spin {
    0% {
        transform: rotate(0deg) translate(50px) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) translate(50px) rotate(-360deg);
        opacity: 0;
    }
}

چطور کار می‌کند؟

• translate(50px): هر نقطه را 50px از مرکز دور می‌کند (شعاع دایره).
• rotate(360deg) روی کانتینر: کل نقطه را به دور مرکز بچرخاند.
• rotate(-360deg) روی خود نقطه: جهت نقطه را ثابت نگه می‌دارد (اگر نباشد، نقطه هم می‌چرخد!).
• opacity: نقطه در ابتدا و انتهای چرخش ناپدید می‌شود و در وسط پررنگ می‌شود.

۷. انیمیشن متن “Loading…”

.loading-text {
    color: #4285f4;
    font-size: 18px;
    animation: fade 1.5s ease-in-out infinite;
}

@keyframes fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

• fade: متن را به صورت مداوم بین شفافیت ۰.۶ و ۱ تغییر می‌دهد.
• ease-in-out: حرکت نرم و طبیعی.

کد نهایی کامل

در اینجا کد کامل و آماده استفاده را داریم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        .loader {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .dots-container {
            position: relative;
            width: 120px;
            height: 120px;
        }

        .dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background-color: #4285f4;
            border-radius: 50%;
            transform-origin: 60px 60px;
            animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
        }

        .dot:nth-child(1) {
            animation-delay: -0.1s;
            background-color: rgba(66, 133, 244, 0.3);
            width: 6px;
            height: 6px;
        }

        .dot:nth-child(2) {
            animation-delay: -0.2s;
            background-color: rgba(66, 133, 244, 0.5);
            width: 7px;
            height: 7px;
        }

        .dot:nth-child(3) {
            animation-delay: -0.3s;
            background-color: rgba(66, 133, 244, 0.7);
            width: 8px;
            height: 8px;
        }

        .dot:nth-child(4) {
            animation-delay: -0.4s;
            background-color: rgba(66, 133, 244, 0.9);
            width: 9px;
            height: 9px;
        }

        .dot:nth-child(5) {
            animation-delay: -0.5s;
            width: 10px;
            height: 10px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg) translate(50px) rotate(0deg);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: rotate(360deg) translate(50px) rotate(-360deg);
                opacity: 0;
            }
        }

        .loading-text {
            color: #4285f4;
            font-size: 18px;
            animation: fade 1.5s ease-in-out infinite;
        }

        @keyframes fade {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="loader">
        <div class="dots-container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="loading-text">Loading...</div>
    </div>
</body>
</html>

نتیجه‌گیری

در این مقاله، یک لوودر زیبا و حرفه‌ای را با استفاده از فقط HTML و CSS ساختیم. بدون نیاز به جاوااسکریپت، توانستیم یک انیمیشن پویا، مرکزی و ریسپانسیو بسازیم که می‌تواند در هر سایت، پنل مدیریت یا اپلیکیشن وب استفاده شود.

اگر این مقاله را دوست داشتید، اشتراک‌گذاری کنید و در کامنت‌ها پیشنهادات خود را بگویید!