چگونه ایجاد می‌شود: بارگذارنده CSS

آموزش نحوه استفاده از CSS برای ایجاد بارگذارنده.

آزمایش کنید

چگونه بارگذارنده ایجاد می‌کنیم

مرحله اول - اضافه کردن HTML:

<div class="loader"></div>

مرحله دوم - اضافه کردن CSS:

.loader {
  border: 16px solid #f3f3f3; /* خاکستری روشن */
  border-top: 16px solid #3498db; /* آبی */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

آزمایش کنید

مثال توضیحی:

border ویژگی مشخص می‌کند که اندازه و رنگ لبه چرخنده چگونه تعیین می‌شود.border-radius ویژگی چرخنده را به شکل دایره‌ای تبدیل می‌کند.

بخش آبی که در داخل لبه‌ها چرخش می‌کند توسط border-top مشخص شده است. اگر می‌خواهید چرخنده‌های بیشتری داشته باشید، می‌توانید border-bottomوborder-left و/یا border-rightمشاهده نمونه زیر).

اندازه چرخنده توسط width و height مشخص شده است.

در نهایت، ما یک انیمیشن اضافه کردیم که بخش آبی با سرعت 2 ثانیه‌ای به طور همیشگی چرخش کند.

توجه:برای animation و transform به عنوان مثال، مرورگرهایی که این ویژگی را پشتیبانی نمی‌کنند، شما باید یک -webkit- پیشوند. لطفاً به نمونه‌ها برای مشاهده نحوه عملکرد آن بپردازید.

افزودن更多的 چرخنده‌ها

مثال

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

آزمایش کنید

مثال

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

آزمایش کنید

مثال

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

آزمایش کنید

مثال دیگری

چگونه بارگذار را در وسط صفحه قرار دهیم و در حالی که بارگذاری کامل می‌شود، متن "محتوای صفحه" را نمایش دهیم:

مثال

آزمایش کنید