لودر مدار چرخان
لودر
چرخش
نقطه
۴۵
۴.۷ (۷)
<div class="radikalwp-ui-orbit"><span><//span><span><//span><span><//span><//div>
.radikalwp-ui-orbit {
position: relative;
width: 56px;
height: 56px;
}
.radikalwp-ui-orbit span {
position: absolute;
inset: 0;
animation: radikalwp-orbit-spin 1.6s linear infinite;
}
.radikalwp-ui-orbit span:nth-child(2) { animation-delay: -.55s; }
.radikalwp-ui-orbit span:nth-child(3) { animation-delay: -1.1s; }
.radikalwp-ui-orbit span::before {
content: '';
position: absolute;
top: 0;
right: 50%;
width: 12px;
height: 12px;
margin-right: -6px;
border-radius: 50%;
background: #6366f1;
}
.radikalwp-ui-orbit span:nth-child(2)::before {
width: 9px;
height: 9px;
margin-right: -4.5px;
background: #a855f7;
opacity: .85;
}
.radikalwp-ui-orbit span:nth-child(3)::before {
width: 7px;
height: 7px;
margin-right: -3.5px;
background: #ec4899;
opacity: .7;
}
@keyframes radikalwp-orbit-spin { to { transform: rotate(360deg); } }
سه نقطه با اندازه و رنگ متفاوت که روی مدار دایرهای بهگردش درمیآیند و تصویر منظومهای چرخان میسازند. حرکت پیوسته و رنگبندی بنفشخانواده آن را برای فضاهای مدرن مناسب کرده است. برای بارگذاری محتوا، انتظار پاسخ سرور و حالتهای پردازش داده استفاده میشود. سرعت چرخش با یک مقدار زمانی تنظیم میشود.
مقدار 1.6s در animation کلاس span را کم یا زیاد کنید. تاخیرهای منفی nth-child را هم متناسب تغییر دهید تا فاصله نقاط حفظ شود.
سه رنگ در شبهالمان ::before و دو قانون nth-child تعریف شده است. آنها را با سه تن از پالت برند جایگزین کنید.
بله؛ کافی است والدش را flex با justify-content و align-items وسط بگذارید تا لودر در مرکز صفحه بچرخد.
میانگین امتیاز کاربران: ۴.۶ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!