پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-conic-wrap"><span class="radikalwp-conic-loader"><//span><//div>
.radikalwp-conic-wrap {
  position: relative;
  width: 46px;
  height: 46px;
}
.radikalwp-conic-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(139, 92, 246, .12);
}
.radikalwp-conic-loader {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6 0deg 110deg, rgba(139, 92, 246, .15) 110deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: radikalwp-conic-spin 1.1s linear infinite;
}
@keyframes radikalwp-conic-spin {
  to { transform: rotate(360deg); }
}

درباره این اسنیپت

حلقه باریک با قوس بنفش که با ماسک دایره‌ای برش خورده و روان می‌چرخد. ظاهر مدرن و سبک آن برای دکمه‌های بارگذاری و اسپینرهای درون‌خطی مناسب است. چون از conic-gradient و mask ساخته شده، حجم کد ناچیز و کیفیت تیز است. رنگ قوس با یک مقدار hex قابل تغییر و اندازه آن با width و height تنظیم می‌شود.

پرسش‌های متداول

عدد داخل mask ضخامت برش را تعیین می‌کند. آن را کم یا زیاد کنید تا حلقه کلفت‌تر یا باریک‌تر شود.

بله؛ نسخه -webkit-mask هم در کد قرار دارد تا در سافاری و مرورگرهای وبکیت درست رندر شود.

رنگ قوس در conic-gradient و رنگ رد پس‌زمینه در شبه‌المان wrap قرار دارد. هر دو را با پالت خود جایگزین کنید.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

لودر حلقه گرادیانی

لودر حلقه گرادیان
۳۲
۴.۶ (۵)
پیش‌نمایش زنده اسنیپت

لودر حلقه گرادیان دوتایی

لودر حلقه گرادیان
۳۰
۴.۳ (۴)
پیش‌نمایش زنده اسنیپت

لودر حلقه دولپره

لودر حلقه چرخش دوگانه
۱۵
۴.۶ (۳)