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

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

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

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

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

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

کپچا

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

شاید بپسندی

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

لودر سه نقطه پرشی

لودر نقطه پرش
۴۷
۴.۲ (۷)
پیش‌نمایش زنده اسنیپت

لودر سه‌نقطه‌ای جهشی

لودر نقطه چت
۵۲
۴.۲ (۸)
لطفا صبر کنید
پیش‌نمایش زنده اسنیپت

لودر متن سه نقطه‌ای

لودر متن نقطه
۴۵
۴.۷ (۷)