پیشنمایش زنده (iframe sandbox)
تمامصفحه
<div class="radikalwp-ld-wave"><span><//span><span><//span><span><//span><span><//span><//div>
.radikalwp-ld-wave { display: flex; align-items: center; gap: 5px; height: 44px; }
.radikalwp-ld-wave span {
width: 7px;
height: 12px;
background: #10b981;
border-radius: 4px;
animation: radikalwp-wave-up 1.1s ease-in-out infinite;
}
.radikalwp-ld-wave span:nth-child(2) { animation-delay: .15s; background: #059669; }
.radikalwp-ld-wave span:nth-child(3) { animation-delay: .3s; }
.radikalwp-ld-wave span:nth-child(4) { animation-delay: .45s; background: #059669; }
@keyframes radikalwp-wave-up {
0%, 100% { height: 12px; }
50% { height: 38px; }
}
درباره این اسنیپت
سه میله با ارتفاع موجی متناوب؛ کلاسیکترین لودر صوتینما که همیشه دیده نشده کهنه میشود. برای پلیرها، پیامهای صوتی و صفحات موسیقی ساخته شده است.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!