پیشنمایش زنده
اسنیپت
لودر ششضلعی چرخان
لودر
ششضلعی
هندسی
۱۰۰
۴.۲ (۱۶)
<div class="radikalwp-loader-square" role="status" aria-label="در حال بارگذاری"><//div>
.radikalwp-loader-square {
width: 44px;
height: 44px;
padding: 3px;
border-radius: 10px;
background: conic-gradient(#22d3ee 0deg, #22d3ee 90deg, transparent 120deg, transparent 360deg);
animation: radikalwp-loader-square-spin 1.4s linear infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
@keyframes radikalwp-loader-square-spin {
to { transform: rotate(360deg); }
}
مربع توخالی که بهجای چرخش کامل، لبههایش پشتسرهم روشن میشوند و مسیر دور مربع را طی میکنند؛ ظاهری هندسی و تکنیکال. برای داشبوردهای فنی، ابزارها و رابطهای دیتا مناسب است. افکت با گرادیان مخروطی و ماسک داخلی ساخته شده و از یک عنصر بیشتر ندارد. گوشههای گرد ملایم، تیزی هندسی را نرم میکند.
اگر مرورگر بسیار قدیمی ماسک را پشتیبانی نکند، بهجای قاب، مربع توپر گرادیانی دیده میشود که همچنان زیباست؛ سایت هیچوقت خراب نمیشود.
زاویه 90deg و 120deg در گرادیان را تغییر دهید؛ زاویه بزرگتر یعنی پره بلندتر و سرعت ظاهری بیشتر.
border-radius را به 2px کاهش دهید تا ظاهر مکانیکی و تیز بگیرد؛ برای استایل کامل هندسی صفر هم میتوانید بگذارید.
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!