Single Element Loaders: The Bars

Εξετάσαμε τα spinners. Κοιτάξαμε κουκκίδες. Τώρα θα αντιμετωπίσουμε ένα άλλο κοινό μοτίβο για φορτωτές: μπαρ. Και θα κάνουμε το ίδιο πράγμα σε αυτό το τρίτο άρθρο της σειράς με τα άλλα, φτιάχνοντάς το με ένα μόνο στοιχείο και με ευέλικτο CSS που διευκολύνει τη δημιουργία παραλλαγών.

Ας ξεκινήσουμε με όχι ένα, όχι δύο, αλλά 20 παραδείγματα bar loaders.

Τι?! Θα περιγράψετε λεπτομερώς το καθένα από αυτά; Είναι πάρα πολύ για ένα άρθρο!

Μπορεί να φαίνεται έτσι με την πρώτη ματιά! Αλλά όλα βασίζονται στην ίδια δομή κώδικα και ενημερώνουμε μόνο μερικές τιμές για να δημιουργήσουμε παραλλαγές. Αυτή είναι όλη η δύναμη του 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 απάτη. Επομένως, αν ποτέ νιώθετε ότι πηδάμε πολύ γρήγορα ή πιστεύετε ότι χρειάζεστε λίγο περισσότερες λεπτομέρειες, ελέγξτε τα. Μπορείτε επίσης να διαβάσετε το δικό μου Απάντηση στοίβας υπερχείλισης όπου δίνω αναλυτική εξήγηση για το πώς λειτουργούν όλα αυτά.

Ζωντανεύοντας τις μπάρες

Είτε κάνουμε κίνηση στο μέγεθος ή τη θέση του στοιχείου για να δημιουργήσουμε τον φορτωτή ράβδων. Ας κάνουμε κίνηση στο μέγεθος ορίζοντας τα ακόλουθα βασικά καρέ κίνησης:

@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 */
}

…που μας φέρνει άλλον φορτωτή!

Πιθανότατα το έχετε καταλάβει μέχρι τώρα. Το μόνο που χρειάζεστε είναι να ορίσετε ένα χρονοδιάγραμμα που μεταφράζετε σε βασικό καρέ. Ζωντανεύοντας το μέγεθος, τη θέση — ή και τα δύο! — υπάρχει άπειρος αριθμός δυνατοτήτων φόρτωσης στα χέρια μας.

Και μόλις αισθανθούμε άνετα με μια τέτοια τεχνική, μπορούμε να προχωρήσουμε περισσότερο και να χρησιμοποιήσουμε μια πιο περίπλοκη κλίση για να δημιουργήσουμε ομοιόμορφα περισσότερο φορτωτές.

Αναμένετε για τα δύο τελευταία παραδείγματα σε αυτήν την επίδειξη, όλοι οι φορτωτές ράβδων χρησιμοποιούν την ίδια υποκείμενη σήμανση και στυλ και διαφορετικούς συνδυασμούς κινούμενων εικόνων. Ανοίξτε τον κώδικα και προσπαθήστε να οπτικοποιήσετε κάθε πλαίσιο ανεξάρτητα. θα δεις πόσο ασήμαντο είναι να κάνεις δεκάδες — αν όχι εκατοντάδες — των παραλλαγών.

Γίνομαι φανταχτερός

Θυμηθήκατε το κόλπο με τη μάσκα που κάναμε με τους dot loaders μέσα; το δεύτερο άρθρο αυτής της σειράς? Μπορούμε να κάνουμε το ίδιο εδώ!

Αν εφαρμόσουμε όλη την παραπάνω λογική μέσα στο mask ιδιότητα μπορούμε να χρησιμοποιήσουμε οποιαδήποτε διαμόρφωση φόντου για να προσθέσουμε έναν φανταχτερό χρωματισμό στους φορτωτές μας.

Ας κάνουμε ένα demo και ας το ενημερώσουμε:

Το μόνο που έκανα είναι να ενημερώσω όλα 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; }

Τώρα, το μόνο που έχουμε να κάνουμε είναι να κάνουμε κίνηση στο ύψος και να προσθέσουμε κάποιες καθυστερήσεις! Ακολουθούν τρία παραδείγματα όπου το μόνο που διαφέρει είναι τα χρώματα και τα μεγέθη:

Ολοκληρώνοντας

Ελπίζω μέχρι στιγμής να αισθάνεστε εξαιρετικά ενθαρρυμένοι από όλες τις δυνάμεις που έχετε για να δημιουργήσετε κινούμενα σχέδια φόρτωσης με περίπλοκη εμφάνιση. Το μόνο που χρειαζόμαστε είναι ένα στοιχείο, είτε ντεγκραντέ είτε ψευδώς για να σχεδιάσουμε τις ράβδους και μετά μερικά βασικά καρέ για να μετακινήσουμε τα πράγματα. Αυτή είναι η όλη συνταγή για να αποκτήσετε ατελείωτες δυνατότητες, οπότε βγείτε έξω και ξεκινήστε να μαγειρεύετε μερικά προσεγμένα πράγματα!

Μέχρι το επόμενο άρθρο θα σας αφήσω μια αστεία συλλογή από loaders όπου συνδυάζω οι τελείες και τα μπαρ!

---

Single Element Loaders: The Bars δημοσιεύθηκε αρχικά στις CSS-Κόλπα. Θα έπρεπε λάβετε το ενημερωτικό δελτίο.

• Coinsmart. Το καλύτερο ανταλλακτήριο Bitcoin και Crypto στην Ευρώπη.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. ΕΛΕΥΘΕΡΗ ΠΡΟΣΒΑΣΗ.
• CryptoHawk. Ραντάρ Altcoin. Δωρεάν δοκιμή.
• Πηγή: https://css-tricks.com/single-element-loaders-the-bars/