<div class="radikalwp-loader-dots" role="status" aria-label="در حال بارگذاری"><span><//span><span><//span><span><//span><//div>
.radikalwp-loader-dots {
display: inline-flex;
gap: 8px;
}
.radikalwp-loader-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #6366f1;
animation: radikalwp-loader-dots-jump 1s cubic-bezier(.5, 0, .5, 1) infinite;
}
.radikalwp-loader-dots span:nth-child(2) { animation-delay: .15s; }
.radikalwp-loader-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes radikalwp-loader-dots-jump {
0%, 100% { transform: translateY(0); opacity: .6; }
40% { transform: translateY(-12px); opacity: 1; }
}
درباره این اسنیپت
سه دایره کوچک که پشتسرهم بالا میپرند و میافتند؛ سادهترین و آشناترین نشانه بارگذاری برای هر وباپلیکیشنی. رنگ تکرنگ با برند هماهنگ میشود و فاصله نقطهها با gap کنترل میشود. برای دکمههای لایک، ارسال دیدگاه و بارگذاریهای سریع محلی مناسب است. بسیار سبک است و حتی روی دستگاههای ضعیف هم روان میچرخد.
پرسشهای متداول
بله؛ اندازه را به 8 پیکسل و رنگ را سفید کنید و داخل دکمه در حالت لودینگ جای متن بگذارید؛ با اسنیپت دکمه لودینگ هم ترکیب میشود.
تاخیرهای nth-child را برعکس کنید (سوم کمترین تاخیر) تا موج از سمت راست حرکت کند؛ در RTL طبیعیتر دیده میشود.
کاهش opacity در لحظه فرود، حس وزن و فرود طبیعی نقطه را تقویت میکند؛ اگر مینیمالتر میخواهید مقدار opacity را ثابت 1 بگذارید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!