מטעני אלמנט בודד: הספינר

יצירת מעמיסים ל-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, שים לב שההדגמה עשויה להיות בעייתית. הסיבה לכך היא שב-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. כתבתי מאמר נוסף על הטכניקה הזו אם אתה רוצה יותר פרטים.

שים לב שחלק מהדפדפנים עדיין מסתמכים על א -webkit- קידומת עבור mask-composite עם סט ערכים משלו, ולא יציג את הספינר בהדגמה. הנה דרך לעשות זאת לְלֹא mast-composite לתמיכה נוספת בדפדפן.

יש לי עוד אחד בשבילך:

בשביל זה, אני משתמש ב-a background-color לשלוט בצבע, ולהשתמש mask ו mask-composite כדי ליצור את הצורה הסופית:

לפני שנסיים, הנה עוד כמה מעמיסים מסתובבים שהכנתי לפני כמה זמן. אני מסתמך על טכניקות שונות אבל עדיין משתמש בהדרגות, מסכות, פסאודו-אלמנטים וכו'. זה יכול להיות תרגיל טוב להבין את ההיגיון של כל אחד מהם וללמוד טריקים חדשים בו-זמנית. עם זאת, אם יש לך שאלה כלשהי לגביהם, קטע התגובות נמצא למטה.

גלישה את

תראה, יש כל כך הרבה שאנחנו יכולים לעשות ב-CSS בלי שום דבר מלבד div בודד, כמה מעברים, פסאודו-אלמנטים, משתנים. זה נראה כאילו יצרנו חבורה שלמה של מעמיסים מסתובבים שונים, אבל כולם בעצם אותו הדבר עם שינויים קלים.

זו רק ההתחלה. בסדרה זו, נבחן עוד רעיונות ומושגים מתקדמים ליצירת מעמיסי CSS.

---

מטעני אלמנט בודד: הספינר פורסם במקור ב CSS-טריקים. אתה צריך לקבל את הניוזלטר.

• Coinsmart. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://css-tricks.com/single-element-loaders-the-spinner/