پیشنمایش زنده (iframe sandbox)
تمامصفحه
<div class="radikalwp-loader-ring" role="status" aria-label="در حال بارگذاری"><//div>
.radikalwp-loader-ring {
width: 46px;
height: 46px;
border-radius: 50%;
border: 4px solid rgba(99, 102, 241, .18);
border-top-color: #6366f1;
border-right-color: #8b5cf6;
animation: radikalwp-loader-ring-spin .9s linear infinite;
}
@keyframes radikalwp-loader-ring-spin {
to { transform: rotate(360deg); }
}
درباره این اسنیپت
حلقهای که یک سوم آن گرادیان روشن و بقیه محو است و با چرخش پیوسته، حس جریان مداوم میدهد. ضخامت حلقه با border کنترل میشود و رنگ گرادیان بهراحتی با برند عوض میشود. برای بارگذاریهای طولانیتر مثل آپلود فایل و واکشی گزارشها مناسب است. چون حلقهای است فضای کمی میگیرد و کنار متن هم مینشیند.
پرسشهای متداول
عدد 4px در ویژگی border را تغییر دهید؛ برای حلقههای بزرگتر ضخامت متناسب 5 یا 6 پیکسل خوب دیده میشود.
رنگ border-right را با border-top برابر کنید تا فقط یک پره روشن باشد؛ حرکت سادهتر و کلاسیکتر دیده میشود.
لودر و متن را داخل flex با gap بچینید و اندازه حلقه را به 22 پیکسل و ضخامت را 3 پیکسل کاهش دهید تا با ارتفاع متن هماهنگ شود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!