<div class="radikalwp-loader-bars" role="status" aria-label="در حال بارگذاری"><span><//span><span><//span><span><//span><span><//span><span><//span><//div>
.radikalwp-loader-bars {
display: flex;
align-items: center;
gap: 6px;
height: 44px;
}
.radikalwp-loader-bars span {
width: 6px;
height: 100%;
border-radius: 999px;
background: linear-gradient(to bottom, #6366f1, #a78bfa);
animation: radikalwp-loader-bars-wave 1.1s ease-in-out infinite;
}
.radikalwp-loader-bars span:nth-child(2) { animation-delay: .12s; }
.radikalwp-loader-bars span:nth-child(3) { animation-delay: .24s; }
.radikalwp-loader-bars span:nth-child(4) { animation-delay: .36s; }
.radikalwp-loader-bars span:nth-child(5) { animation-delay: .48s; }
@keyframes radikalwp-loader-bars-wave {
0%, 100% { transform: scaleY(.35); }
50% { transform: scaleY(1); }
}
درباره این اسنیپت
پنج میله عمودی همارتفاع که پشتسرهم بالا و پایین میروند و موجی منظم میسازند؛ کلاسیک بیزمان لودینگهای صوتی. رنگها با گرادیان تکرنگ تنظیم شده و تاخیر مرحلهای حس نرمی میدهد. برای پلیرها، بخش موسیقی، لود محتوا و اسکلتونهای تعاملی مناسب است. تعداد میلهها با کپی HTML قابل افزایش است.
پرسشهای متداول
به هر span یک رنگ ثابت بدهید یا گرادیان را روی هر میله با hue-rotate جابهجا کنید؛ تعداد تاخیرها را هم برای میلههای جدید تکمیل کنید.
چون scaleY خود والد را تغییر نمیدهد و میلهها با درصد ارتفاع کار میکنند؛ ارتفاع ثابت روی کانتینر، لرزش چیدمان اطراف را غیرممکن میکند.
درصد 50 در کیفریم تعیین میکند نیمی از زمان صرف بالا رفتن شود؛ برای مکث بیشتر، بازه 60 تا 90 درصد را روی مقدار پایین نگه دارید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!