پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-cascade-loader"><i><//i><i><//i><i><//i><i><//i><//div>
.radikalwp-cascade-loader {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 34px;
}
.radikalwp-cascade-loader i {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  animation: radikalwp-cascade-jump 1.15s ease-in-out infinite;
}
.radikalwp-cascade-loader i:nth-child(2) { animation-delay: .14s; }
.radikalwp-cascade-loader i:nth-child(3) { animation-delay: .28s; }
.radikalwp-cascade-loader i:nth-child(4) { animation-delay: .42s; }
@keyframes radikalwp-cascade-jump {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-16px); }
  60% { transform: translateY(0); }
}

درباره این اسنیپت

چهار مربع گردگوشه که یکی‌درمیان و با تأخیر پلکانی بالا و پایین می‌پرند و حس آبشار می‌سازند. ریتم نرم و رنگ‌آمیزی گرادیانی آن برای لودرهای عمومی سایت خوشایند است. اندازه و فاصله مربع‌ها با چند مقدار ثابت کنترل می‌شود و مقیاس‌پذیر است. برای هدرهای سبک، حالت بارگذاری جدول و صفحات فهرست مناسب است.

پرسش‌های متداول

تگ i بیشتری اضافه کنید و تأخیر animation-delay هر کدام را پلکانی زیاد کنید تا ریتم آبشاری حفظ شود.

بله؛ گرادیان بنفش روی زمینه تیره هم واضح است. در صورت نیاز رنگ‌ها را روشن‌تر کنید تا کنتراست بیشتر شود.

مقدار translateY در keyframes را کوچک‌تر کنید. برای فضاهای باریک پرش ملایم‌تر مناسب‌تر است.

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

میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید

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

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

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

کپچا

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

شاید بپسندی

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

لودر چشمک زدن صفحه

لودر مربع جابه‌جایی
۶۰
۴.۱ (۹)
پیش‌نمایش زنده اسنیپت

لودر مربع لبه‌نما

لودر مربع هندسی
۴۵
۴.۷ (۷)
پیش‌نمایش زنده اسنیپت

لودر مربع چرخان گرد

لودر مربع تغییر شکل
۳۷
۴.۰ (۶)