پیشنمایش زنده (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 قرار دارد. هر دو را با پالت خود جایگزین کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!