<div class="radikalwp-loader-bars"><i><//i><i><//i><i><//i><i><//i><i><//i><//div>
.radikalwp-loader-bars { display: inline-flex; align-items: center; gap: 5px; height: 40px; }
.radikalwp-loader-bars i {
width: 7px;
height: 100%;
border-radius: 4px;
background: linear-gradient(180deg, #22d3ee, #6366f1);
animation: radikalwp-lbars-wave 1s ease-in-out infinite;
}
.radikalwp-loader-bars i:nth-child(2) { animation-delay: .12s; }
.radikalwp-loader-bars i:nth-child(3) { animation-delay: .24s; }
.radikalwp-loader-bars i:nth-child(4) { animation-delay: .36s; }
.radikalwp-loader-bars i:nth-child(5) { animation-delay: .48s; }
@keyframes radikalwp-lbars-wave {
0%, 100% { transform: scaleY(.35); }
50% { transform: scaleY(1); }
}
درباره این اسنیپت
سه میله عمودی با ارتفاع موجی متغیر؛ شبیه اکولایزر موسیقی و برای پخشکنندهها فوقالعاده است. این لودر برای لحظههای انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!