لودرهای تک عنصری: اسپینر

ساخت لودرهای فقط CSS یکی از کارهای مورد علاقه من است. تماشای آن انیمیشن های بی نهایت همیشه راضی کننده است. و، البته، وجود دارد مقدار زیادی از تکنیک ها و رویکردهای ساخت آنها - بدون نیاز به بیشتر از CodePen نگاه کنید تا ببینیم چند نفر در این مقاله، با این حال، خواهیم دید که چگونه می توان یک لودر تک عنصری را با کمترین کد ممکن بنویسد.

من باید مجموعه ای از بیش از 500 لودر تک دیو ساخته شده است و در این مجموعه چهار قسمتی، قصد دارم ترفندهایی را که برای ساختن بسیاری از آنها استفاده کردم، به اشتراک بگذارم. ما تعداد زیادی مثال را پوشش خواهیم داد، که نشان می دهد چگونه تنظیمات کوچک می تواند منجر به تغییرات سرگرم کننده شود، و چقدر کد کمی نیاز داریم که بنویسیم تا همه چیز اتفاق بیفتد!

برای این مقاله اول، ما می خواهیم یکی از رایج ترین الگوهای لودر ایجاد کنیم: میله های چرخشی:

در اینجا رویکرد است

یک پیاده سازی بی اهمیت برای این لودر این است که برای هر نوار پیچیده شده در یک عنصر والد یک عنصر ایجاد کنید (برای نه عنصر کل)، سپس با آن بازی کنید. opacity و transform برای به دست آوردن اثر چرخش

با این حال، اجرای من فقط به یک عنصر نیاز دارد:

<div class="loader"></div>

… و 10 اعلان CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

بیایید آن را تجزیه کنیم

در نگاه اول، کد ممکن است عجیب به نظر برسد، اما خواهید دید که ساده تر از آن چیزی است که فکر می کنید. اولین قدم تعیین ابعاد عنصر است. در مورد ما، این یک است 150px مربع. می توانیم قرار دهیم aspect-ratio برای استفاده از آن عنصر بدون توجه به هر چیزی مربع باقی بماند.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

هنگام ساخت لودرهای CSS، همیشه سعی می کنم یک مقدار برای کنترل اندازه کلی داشته باشم. در این مورد، آن است width و تمام محاسباتی که ما پوشش می دهیم به آن مقدار اشاره خواهد کرد. این به من امکان می دهد یک مقدار واحد را برای کنترل لودر تغییر دهم. همیشه مهم است که بتوانیم به راحتی اندازه لودرهای خود را بدون نیاز به تنظیم مقادیر اضافی تنظیم کنیم.

در مرحله بعد، از گرادیان برای ایجاد نوارها استفاده خواهیم کرد. این سخت ترین قسمت است! استفاده کنیم یک گرادیان برای ایجاد دو نوارهایی مانند زیر:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

گرادیان ما با یک رنگ و دو توقف رنگ تعریف می شود. نتیجه یک رنگ ثابت بدون محو شدن یا انتقال است. اندازه برابر است با 34% گسترده و 8% بلند قد. همچنین در مرکز قرار داده شده است (50%). ترفند استفاده از ارزش کلمه کلیدی است space - این گرادیان را کپی می‌کند و به ما دو نوار می‌دهد.

از جانب مشخصات:

تصویر هر چند وقت یکبار که در ناحیه موقعیت‌یابی پس‌زمینه قرار می‌گیرد بدون برش دادن تکرار می‌شود و سپس تصاویر با فاصله از یکدیگر قرار می‌گیرند تا این ناحیه را پر کنند. اولین و آخرین تصاویر لبه های منطقه را لمس می کنند.

من از عرضی برابر استفاده می کنم 34% یعنی ما نمی توانیم بیش از دو نوار داشته باشیم (3*34% بزرگتر از 100%) اما با دو نوار فضاهای خالی خواهیم داشت (100% - 2 * 34% = 32%). آن فضا در مرکز بین دو میله قرار می گیرد. به عبارت دیگر، از یک عرض برای گرادیان استفاده می کنیم که بین آن قرار دارد 33% و 50% تا مطمئن شویم که حداقل دو میله با کمی فاصله بین آنها داریم. ارزش space چیزی است که آنها را به درستی برای ما قرار می دهد.

ما همین کار را انجام می دهیم و یک گرادیان مشابه دوم ایجاد می کنیم تا دو میله دیگر در بالا و پایین به دست آوریم که به ما یک background ارزش اموال:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

ما می توانیم با استفاده از یک متغیر CSS برای جلوگیری از تکرار آن را بهینه کنیم:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

بنابراین، اکنون ما چهار نوار داریم و به لطف متغیرهای CSS، می‌توانیم مقدار رنگ را یک بار بنویسیم که به‌روزرسانی آن را بعداً آسان می‌کند (مانند اندازه لودر).

برای ایجاد نوارهای باقیمانده، اجازه دهید به آن ضربه بزنید .loader عنصر و آن ::before شبه عنصر برای به دست آوردن چهار میله دیگر برای مجموع کل هشت نوار.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

به استفاده از display: grid. این به ما امکان می دهد به پیش فرض شبکه تکیه کنیم stretch تراز برای اینکه شبه عنصر کل ناحیه والد خود را پوشش دهد. بنابراین نیازی به تعیین یک بعد روی آن نیست - ترفند دیگری که کد را کاهش می دهد و ما را از برخورد با مقادیر زیادی باز می دارد!

حالا بیایید شبه عنصر را بچرخانیم 45deg برای قرار دادن میله های باقی مانده برای مشاهده ترفند، دمو زیر را نگه دارید:

تنظیم کدورت

کاری که ما می‌خواهیم انجام دهیم این است که این تصور را ایجاد کنیم که یک میله وجود دارد که در حین حرکت در یک مسیر دایره‌ای، ردی از میله‌های محو شده را پشت سر خود به جای می‌گذارد. چیزی که ما اکنون نیاز داریم این است که با شفافیت نوارهای خود بازی کنیم تا آن مسیر را ایجاد کنیم، کاری که می خواهیم با CSS انجام دهیم. mask با یک گرادیان مخروطی به صورت زیر ترکیب می شود:

mask: conic-gradient(from 22deg,#0003,#000);

برای بهتر دیدن این ترفند، اجازه دهید این را در یک جعبه تمام رنگی اعمال کنیم:

شفافیت رنگ قرمز به تدریج در جهت عقربه های ساعت افزایش می یابد. ما این را به لودر خود اعمال می کنیم و میله هایی با کدورت متفاوت داریم:

در واقعیت، به نظر می رسد هر نوار محو می شود زیرا توسط یک گرادیان پوشانده شده است و بین دو رنگ نیمه شفاف قرار می گیرد. زمانی که این کار می‌کند به سختی قابل توجه است، بنابراین به نوعی می‌توان گفت که همه میله‌ها یک رنگ با سطح متفاوتی از کدورت دارند.

چرخش

بیایید یک انیمیشن چرخشی برای دریافت لودر خود اعمال کنیم. توجه داشته باشید که ما به یک انیمیشن پلکانی نیاز داریم و نه پیوسته، به همین دلیل من از آن استفاده می کنم steps(8). 8 چیزی جز تعداد میله ها نیست، بنابراین بسته به تعداد نوارهایی که استفاده می شود، می توان آن مقدار را تغییر داد.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

خودشه! ما لودر خود را تنها با یک عنصر و چند خط CSS داریم. با تنظیم یک مقدار به راحتی می توانیم اندازه و رنگ آن را کنترل کنیم.

از آنجایی که ما فقط از ::before شبه عنصر، می توانیم با استفاده از چهار نوار دیگر اضافه کنیم ::after با 12 میله در کل و تقریباً یک کد به پایان برسد:

ما چرخش شبه عناصر خود را برای در نظر گرفتن به روز می کنیم 30deg و 60deg بجای 45deg در حالی که از یک انیمیشن دوازده مرحله ای استفاده می کنید، نه هشت. قد را هم کم کردم 5% بجای 8% تا میله ها کمی نازک تر شوند.

همچنین توجه کنید که ما داریم grid-area: 1/1 روی شبه عناصر این به ما این امکان را می دهد که آنها را در همان ناحیه قرار دهیم که روی هم چیده شده اند.

حدس بزن چی شده؟ ما می توانیم با استفاده از پیاده سازی دیگری به همان لودر دسترسی پیدا کنیم:

آیا می توانید منطق پشت کد را بفهمید؟ در اینجا یک نکته وجود دارد: کدورت دیگر با یک CSS کنترل نمی شود mask اما در داخل شیب و همچنین با استفاده از opacity ویژگی.

چرا به جای آن نقطه نیست؟

ما کاملاً می توانیم این کار را انجام دهیم:

اگر کد را بررسی کنید، خواهید دید که ما اکنون به جای شیب خطی با یک گرادیان شعاعی کار می کنیم. در غیر این صورت، مفهوم دقیقاً همان جایی است که ماسک احساس کدورت را ایجاد می کند، اما ما اشکال را به جای خطوط به صورت دایره ساخته ایم.

در زیر شکلی برای نشان دادن پیکربندی گرادیان جدید آمده است:

اگر از Safari استفاده می کنید، توجه داشته باشید که نسخه نمایشی ممکن است باگ باشد. این به این دلیل است که سافاری در حال حاضر فاقد پشتیبانی از آن است at نحو در شیب شعاعی اما برای غلبه بر آن می توانیم گرادیان را مجدداً پیکربندی کنیم:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

نمونه های بیشتر لودر

در اینجا ایده دیگری برای لودر اسپینر مشابه ایده قبلی وجود دارد.

برای این یکی فقط به آن تکیه می کنم background و mask برای ایجاد شکل (بدون نیاز به شبه عناصر). من همچنین پیکربندی را با متغیرهای CSS تعریف می کنم تا بتوانم تغییرات زیادی را از همان کد ایجاد کنم - نمونه دیگری از فقط قدرت متغیرهای CSS. مقاله دیگری در مورد این تکنیک نوشتم اگر می خواهید به جزئیات بیشتر

توجه داشته باشید که برخی از مرورگرها همچنان به a متکی هستند -webkit- پیشوند برای mask-composite با مجموعه ای از مقادیر خاص خود، و اسپینر را در دمو نمایش نمی دهد. در اینجا راهی برای انجام آن وجود دارد بدون mast-composite برای پشتیبانی بیشتر از مرورگر

من یکی دیگر برای شما دارم:

برای این یکی از a استفاده می کنم background-color برای کنترل رنگ و استفاده از mask و mask-composite برای ایجاد شکل نهایی:

قبل از پایان، در اینجا چند لودر چرخشی دیگر وجود دارد که مدتی قبل ساختم. من به تکنیک‌های مختلفی تکیه می‌کنم، اما همچنان از گرادیان، ماسک، شبه عنصر و غیره استفاده می‌کنم. این می‌تواند تمرین خوبی برای فهمیدن منطق هر کدام و یادگیری ترفندهای جدید در همان زمان باشد. این گفت، اگر سوالی در مورد آنها دارید، بخش نظرات در پایین است.

پسگفتار

ببینید، ما کارهای زیادی در CSS می‌توانیم انجام دهیم، جز یک div، چند شیب، شبه عناصر، و متغیرها. به نظر می رسد که ما یک دسته کامل از لودرهای چرخان مختلف ایجاد کرده ایم، اما همه آنها اساساً با تغییرات جزئی یکسان هستند.

این تنها آغاز کار است. در این مجموعه به بررسی ایده ها و مفاهیم پیشرفته تری برای ایجاد لودر CSS خواهیم پرداخت.

---

لودرهای تک عنصری: اسپینر در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• Source: https://css-tricks.com/single-element-loaders-the-spinner/