<div class="radikalwp-loader-bar">
<span><//span>
<//div>
.radikalwp-loader-bar {
width: 240px;
height: 6px;
background: #e2e8f0;
border-radius: 99px;
overflow: hidden;
}
.radikalwp-loader-bar span {
display: block;
width: 40%;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #6366f1, #a855f7);
animation: radikalwp-slide 1.4s ease-in-out infinite;
}
@keyframes radikalwp-slide {
0% { transform: translateX(100%); }
100% { transform: translateX(-260%); }
}
درباره این اسنیپت
نوار لودینگ با دسته متحرک که مسیر رفتوبرگشت طی میکند؛ شبیه نوار بالای یوتیوب. این لودر برای لحظههای انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!