<div class="radikalwp-prog"><div class="radikalwp-prog-head"><span>آپلود فایل<//span><span>۷۳٪<//span><//div><div class="radikalwp-prog-track"><i class="radikalwp-prog-fill"><//i><//div><//div>
.radikalwp-prog { width: 300px; font-family: inherit; }
.radikalwp-prog-head { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: #475569; }
.radikalwp-prog-track {
height: 16px;
background: #f1f5f9;
border-radius: 999px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.radikalwp-prog-fill {
display: block;
height: 100%;
width: 73%;
border-radius: 999px;
background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent), linear-gradient(90deg, #6366f1, #8b5cf6);
background-size: 22px 22px, 100% 100%;
animation: radikalwp-prog-slide 1s linear infinite;
}
@keyframes radikalwp-prog-slide { to { background-position: -22px 0, 0 0; } }
درباره این اسنیپت
نوار پیشرفت با بافت راهراه متحرک و درصد نمایشی؛ حس «در حال کار کردن» را منتقل میکند. این کامپوننت آماده یکی از اجزای پرکاربرد رابط کاربری است و مستقیم داخل صفحهها قرار میگیرد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۵ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!