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

,

در این مقاله جامع، نحوه ایجاد یک انیمیشن لودینگ دایره‌ای جذاب را با استفاده از CSS خالص آموزش می‌دهیم. این انیمیشن برای صفحات وب، اپلیکیشن‌ها و پروژه‌های فرانت‌اند مناسب است.

مقدمه

انیمیشن‌های لودینگ به کاربران نشان می‌دهند که محتوای در حال بارگذاری است. در این آموزش، یک لودینگ دایره‌ای با سه نیم‌دایره رنگی ایجاد می‌کنیم که به صورت هماهنگ می‌چرخند.

ساختار HTML

<div class="loading-container">
    <div class="circle-loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="loading-text">loading ....</div>
</div>

  • loading-container: ظرف اصلی برای مرتب کردن عناصر

  • circle-loader: ظرف دایره‌های انیمیشنی

  • circle: سه دایره با رنگ‌های مختلف

  • loading-text: متن نمایشی زیر انیمیشن

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

بخش‌های اصلی:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white;
    margin: 0;
    font-family: Arial, sans-serif;
}

  • صفحه را به صورت flex تنظیم می‌کنیم تا محتوا در مرکز قرار گیرد

  • ارتفاع viewport را کامل می‌گیرد

  • پس‌زمینه سفید برای تمیز بودن طراحی

ظرف لودینگ:

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

  • عناصر را به صورت عمودی مرتب می‌کند

  • فاصله 20px بین انیمیشن و متن ایجاد می‌کند

متن لودینگ:

.loading-text {
    font-size: 14px;
    color: #333;
    letter-spacing: 2px;
    animation: pulse 1.5s infinite ease-in-out;
}

  • فونت و رنگ مناسب برای خوانایی

  • انیمیشن pulse برای جلوه‌ی چشمک زن

دایره‌های انیمیشنی:

.circle-loader {
    width: 80px;
    height: 80px;
    position: relative;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
    box-sizing: border-box;
}

  • اندازه ثابت برای ظرف دایره‌ها

  • position: relative برای موقعیت‌دهی مطلق دایره‌های داخلی

  • border-radius: 50% برای شکل دایره‌ای

  • انیمیشن rotate با مدت زمان 2 ثانیه

تنظیمات هر دایره:

.circle:nth-child(1) {
    border: 4px solid transparent;
    border-top-color: #3498db;
    border-bottom-color: #3498db;
}

.circle:nth-child(2) {
    border: 4px solid transparent;
    border-left-color: #e74c3c;
    border-right-color: #e74c3c;
    animation-delay: 0.5s;
    transform: rotate(30deg);
}

.circle:nth-child(3) {
    border: 4px solid transparent;
    border-top-color: #2ecc71;
    border-bottom-color: #2ecc71;
    animation-delay: 1s;
    transform: rotate(60deg);
}

  • هر دایره رنگ مخصوص به خود را دارد

  • animation-delay برای ایجاد افکت موجی

  • transform: rotate برای چیدمان اولیه نیم‌دایره‌ها

انیمیشن‌ها:

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

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

  • rotate: چرخش 360 درجه همراه با تغییر اندازه

  • pulse: تغییر تدریجی شفافیت متن

کد کامل

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Loading Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .loading-text {
            font-size: 14px;
            color: #333;
            letter-spacing: 2px;
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        .circle-loader {
            width: 80px;
            height: 80px;
            position: relative;
        }
        
        .circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: rotate 2s linear infinite;
            box-sizing: border-box;
        }
        
        .circle:nth-child(1) {
            border: 4px solid transparent;
            border-top-color: #3498db;
            border-bottom-color: #3498db;
        }
        
        .circle:nth-child(2) {
            border: 4px solid transparent;
            border-left-color: #e74c3c;
            border-right-color: #e74c3c;
            animation-delay: 0.5s;
            transform: rotate(30deg);
        }
        
        .circle:nth-child(3) {
            border: 4px solid transparent;
            border-top-color: #2ecc71;
            border-bottom-color: #2ecc71;
            animation-delay: 1s;
            transform: rotate(60deg);
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(0.8);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="loading-container">
        <div class="circle-loader">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="loading-text">loading ....</div>
    </div>
</body>
</html>

نکات تکمیلی

  1. تنظیم سرعت: می‌توانید duration انیمیشن‌ها را تغییر دهید

  2. تغییر رنگ: رنگ‌ها را متناسب با پالت رنگ پروژه خود تنظیم کنید

  3. سایز: اندازه دایره‌ها با تغییر width و height در .circle-loader قابل تنظیم است

  4. تعداد دایره‌ها: می‌توانید دایره‌های بیشتری اضافه کنید

این انیمیشن کاملاً ریسپانسیو است و در تمام دستگاه‌ها به خوبی نمایش داده می‌شود. می‌توانید از آن در پروژه‌های مختلف استفاده کنید.

 

آیا این آموزش برای شما مفید بود؟
سوالی دارید؟
ایده‌ای برای بهبود انیمیشن دارید؟
تجربه استفاده از این کد را با ما به اشتراک بگذارید!

 

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *