<div class="radikalwp-loader-hex"><svg viewBox="0 0 50 50" aria-hidden="true"><polygon points="25,4 45,15 45,35 25,46 5,35 5,15" fill="none" stroke="url(#radikalwp-hex-g)" stroke-width="4" stroke-linejoin="round"/><defs><linearGradient id="radikalwp-hex-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8b5cf6"/><stop offset="1" stop-color="#06b6d4"/><//linearGradient><//defs><//svg><//div>
.radikalwp-loader-hex { display: inline-flex; width: 52px; height: 52px; }
.radikalwp-loader-hex svg {
width: 100%;
height: 100%;
animation: radikalwp-lhex-spin 2.2s linear infinite;
filter: drop-shadow(0 0 6px rgba(139, 92, 246, .5));
}
@keyframes radikalwp-lhex-spin { to { transform: rotate(360deg); } }
درباره این اسنیپت
ششضلعی با حاشیه گرادیان که آرام میچرخد؛ فرم هندسی خاص برای برندهای تکنولوژی. این لودر برای لحظههای انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!