<div class="radikalwp-loader-progress" role="progressbar" aria-label="در حال پردازش"><//div>
.radikalwp-loader-progress {
position: relative;
width: 220px;
max-width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.radikalwp-loader-progress::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
animation: radikalwp-loader-progress-run 1.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes radikalwp-loader-progress-run {
0% { left: -40%; }
100% { left: 100%; }
}
درباره این اسنیپت
نوار باریکی که یک قطعه گرادیانی داخل آن رفتوآمد میکند؛ الگوی استاندارد «نمیدانم چقدر مانده» در سیستمعاملها و وباپها. برای بارگذاریهایی که درصد واقعی ندارند مثل بررسی اطلاعات و اتصال به سرور ساخته شده است. حاشیه گرد و ارتفاع کم، آن را برای هدرها و کارتها مناسب میکند. حرکت با transform و بدون هیچ JS است.
پرسشهای متداول
شبهعنصر after را حذف و یک span داخلی با width درصدی و transition بگذارید؛ این اسنیپت مخصوص حالت بدون درصد است.
مقدار width را به 100% تغییر دهید؛ max-width هم در کد هست تا در کانتینرهای خیلی پهن از کش آمدن جلوگیری شود، اگر لازم نیست حذفش کنید.
گرادیان داخل after را با رنگهای هشدار جایگزین کنید؛ پسزمینه نوار را هم روشنتر نگه دارید تا قطعه متحرک دیده شود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!