لودر چشمک زدن صفحه
لودر
مربع
جابهجایی
۶۰
۴.۱ (۹)
<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 را کوچکتر کنید. برای فضاهای باریک پرش ملایمتر مناسبتر است.
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!