<div class="radikalwp-ld-skel"><i><//i><div><b><//b><b><//b><//div><//div>
.radikalwp-ld-skel { display: flex; gap: 12px; width: 240px; }
.radikalwp-ld-skel i, .radikalwp-ld-skel b {
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: radikalwp-skel-shine 1.4s linear infinite;
border-radius: 8px;
}
.radikalwp-ld-skel i { width: 46px; height: 46px; flex-shrink: 0; }
.radikalwp-ld-skel div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.radikalwp-ld-skel b { height: 12px; }
.radikalwp-ld-skel b:last-child { width: 65%; }
@keyframes radikalwp-skel-shine { to { background-position: -200% 0; } }
درباره این اسنیپت
بلوکهای خاکستری با بازتاب نور گذرا؛ پیشنمایش محتوایی که هنوز نرسیده است. برای کارتهای شبکه اجتماعی و لیست محصولات تجربه حرفهای میسازد. این لودر برای لحظههای انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!