پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<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 را با رنگ‌های هشدار جایگزین کنید؛ پس‌زمینه نوار را هم روشن‌تر نگه دارید تا قطعه متحرک دیده شود.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

نوار پیشرفت نامحدود

لودر پیشرفت نوار
۳۷
۴.۰ (۶)
پیش‌نمایش زنده اسنیپت

لودر پیشرفت متحرک نوار

لودر نوار پیشرفت
۱۵
۴.۴ (۳)
پیش‌نمایش زنده اسنیپت

لودر نوار نامعین

لودر نوار اسکلتون
۱۰۰
۴.۲ (۱۶)