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

הסתכלנו על ספינרים. הסתכלנו על נקודות. כעת נתמודד עם דפוס נפוץ נוסף עבור מעמיסים: סורגים. ואנחנו הולכים לעשות את אותו הדבר במאמר השלישי הזה של הסדרה כמו שיש לנו את האחרים על ידי יצירתו עם אלמנט אחד בלבד ועם CSS גמיש שמקל על יצירת וריאציות.

נתחיל עם לא אחת, לא שתיים, אלא 20 דוגמאות של מעמיסי ברים.

מה?! אתה מתכוון לפרט כל אחד מהם? זה יותר מדי בשביל מאמר!

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

בואו נעשה כמה ברים!

אנו מתחילים בהגדרת המידות עבורם באמצעות width (אוֹ height) עם aspect-ratio לשמור על פרופורציה:

.bars { width: 45px; aspect-ratio: 1;
}

אנחנו מעין "מזייפים" שלושה פסים עם שיפוע ליניארי ברקע - דומה מאוד לאופן שבו יצרנו מעמיסי נקודות בחלק 2 של הסדרה הזו.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

הקוד לעיל ייתן לנו את התוצאה הבאה:

כמו שאר המאמרים בסדרה זו, אנחנו הולכים לעסוק בהרבה background רַמָאוּת. אז אם אי פעם תרגיש שאנחנו קופצים מהר מדי או מרגיש שאתה צריך קצת יותר פרטים, אנא בדוק אותם. אתה יכול גם לקרוא את שלי Stack Overflow תשובה איפה אני נותן הסבר מפורט על איך כל זה עובד.

אנימציה של הסורגים

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

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

רואים מה קורה שם? בין 0% ל-100%, האנימציה משנה את background-size של שיפוע הרקע של האלמנט. כל פריים מפתח מגדיר שלושה גדלי רקע (אחד לכל שיפוע).

והנה מה שאנחנו מקבלים:

האם אתה יכול להתחיל לדמיין את כל הווריאציות האפשריות שאנו יכולים לקבל על ידי משחק עם תצורות אנימציה שונות עבור הגדלים או העמדות?

בוא נתקן את הגודל ל 20% 50% ועדכן את המיקומים הפעם:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

...מה שמביא לנו עוד מעמיס!

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

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

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

מתחיל להיות מפואר

האם זכרתם את טריק המסכות שעשינו עם מעמיסי הנקודות המאמר השני בסדרה זו? אנחנו יכולים לעשות את אותו הדבר כאן!

אם נחיל את כל ההיגיון לעיל בתוך ה mask אנו יכולים להשתמש בכל תצורת רקע כדי להוסיף צבע מפואר למעמיסים שלנו.

בואו ניקח הדגמה אחת ונעדכן אותה:

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

אז אין הבדל בין הנקודות לסורגים?

אין הבדל! כתבתי שני מאמרים שונים כדי לכסות כמה שיותר דוגמאות, אבל בשניהם אני מסתמך על אותן טכניקות:

1. מעברי צבע ליצירת הצורות (נקודות או פסים או אולי משהו אחר)
2. אנימציה background-size ו / או background-position כדי ליצור את אנימציית הטוען
3. הוספת מסכה כדי להוסיף מגע של צבעים

עיגול הסורגים

בואו ננסה הפעם משהו אחר שבו נוכל לעגל את הקצוות של הסורגים שלנו.

שימוש באלמנט אחד ושלו ::before ו ::after פסאודו, אנו מגדירים שלושה פסים זהים:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

זה נותן לנו שלושה תווים, הפעם מבלי להסתמך על שיפוע ליניארי:

עכשיו החוכמה היא למלא את הסורגים האלה בשיפוע מקסים. כדי לדמות שיפוע מתמשך, אנחנו צריכים לשחק עם background נכסים. באיור לעיל, השטח הירוק מגדיר את השטח המכוסה על ידי המעמיס. שטח זה צריך להיות בגודל של שיפוע, ואם נעשה את החישוב, זה שווה להכפלת שני הצדדים המסומנים S בתרשים, או background-size: var(--s) var(--s).

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

עבור האלמנט הראשי (הממוקם במרכז), הרקע צריך להיות במרכז. אנו משתמשים בדברים הבאים:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

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

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

ועבור הפסאודו מימין, הרקע צריך להיות ממוקם מימין:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

באמצעות אותו משתנה CSS, --_i, שהשתמשנו בו לתרגום, נוכל לכתוב את הקוד כך:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

כעת, כל שעלינו לעשות הוא להנפיש את הגובה ולהוסיף כמה עיכובים! הנה שלוש דוגמאות שבהן כל מה ששונה הוא הצבעים והגדלים:

גלישה את

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

עד לכתבה הבאה, אשאיר לכם אוסף מצחיק של מעמיסים שאני משלבת בהם הנקודות ו הברים!

---

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

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