لودر رادار جستجو
لودر
رادار
اسکن
۵۲
۴.۲ (۸)
<div class="radikalwp-loader-radar" role="status" aria-label="در حال بررسی"><span class="radikalwp-loader-radar-ring"><//span><span class="radikalwp-loader-radar-ring radikalwp-loader-radar-ring--b"><//span><span class="radikalwp-loader-radar-dot"><//span><//div>
.radikalwp-loader-radar {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.radikalwp-loader-radar-ring {
position: absolute;
inset: 0;
border: 2px solid #22c55e;
border-radius: 50%;
animation: radikalwp-loader-radar-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.radikalwp-loader-radar-ring--b { animation-delay: .9s; }
.radikalwp-loader-radar-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #22c55e;
}
@keyframes radikalwp-loader-radar-ping {
0% { transform: scale(.45); opacity: .9; }
100% { transform: scale(1.25); opacity: 0; }
}
دو حلقه هممرکز که از مرکز پخش میشوند و مثل موج رادار محو میگردند؛ نشانهای زنده برای «در حال بررسی» یا «آنلاین». برای وضعیت اتصال، مانیتورینگ سرور و پیامهای انتظار مناسب است. حلقهها با border و انیمیشن scale و opacity ساخته شدهاند و نقطه مرکزی ثابت است. با تغییر رنگ، برای وضعیتهای خطر و موفقیت هم کار میکند.
برای قرمز خطر و زرد انتظار، رنگ border حلقهها و دایره مرکزی را همزمان تغییر دهید؛ ساختار بقیه ثابت میماند.
تاخیر حلقه دوم (0.9s) را کاهش دهید؛ نصف مدت انیمیشن، توالی متقارن میدهد و کمتر از آن موجها را متراکم میکند.
بله؛ همین الگو روی نقشههای لایو برای نشان دادن موقعیت فعال خیلی رایج است؛ فقط اندازه را به 20 پیکسل کاهش دهید.
میانگین امتیاز کاربران: ۴.۵ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!