Single Element Loaders: Going 3D!

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

Ο φορτωτής split cube

Εδώ είναι ένας τρισδιάστατος φορτωτής όπου ένας κύβος χωρίζεται σε δύο μέρη, αλλά κατασκευάζεται μόνο με ένα μόνο στοιχείο:

Κάθε μισό του κύβου κατασκευάζεται χρησιμοποιώντας ένα ψευδοστοιχείο:

Ωραίο, σωστά;! Μπορούμε να χρησιμοποιήσουμε μια κωνική διαβάθμιση με CSS clip-path στο στοιχείο ::before και ::after ψευδο για την προσομοίωση των τριών ορατών όψεων ενός τρισδιάστατου κύβου. Το αρνητικό περιθώριο είναι αυτό που τραβάει τα δύο ψευδώνυμα μαζί για να επικαλύπτονται και να προσομοιώνουν έναν πλήρη κύβο. Η υπόλοιπη δουλειά μας είναι κυρίως η εμψύχωση αυτών των δύο μισών για να αποκτήσουμε προσεγμένους φορτωτές!

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

Έχουμε τις μεταβλητές μας και μια εξίσωση, οπότε ας τα βάλουμε σε λειτουργία. Αρχικά, θα καθορίσουμε τις μεταβλητές μας και θα ορίσουμε το μέγεθος για την κύρια .loader στοιχείο:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Τίποτα πολύ τρελό μέχρι στιγμής. Εχουμε ένα 150px τετράγωνο που έχει στηθεί ως εύκαμπτο δοχείο. Τώρα καθιερώνουμε τα ψευδή μας:

.loader::before,
.loader::after { content: ""; flex: 1;
}

Αυτά είναι δύο μισά στο .loader δοχείο. Πρέπει να τα βάψουμε, οπότε εκεί είναι που μας κωνική κλίση αρχίζει να επιδράει:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

Η κλίση είναι εκεί, αλλά φαίνεται παράξενο. Εμείς πρέπει να κουμπώστε το στο στοιχείο:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Ας βεβαιωθούμε ότι τα δύο μισά επικαλύπτονται με ένα αρνητικό περιθώριο:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Τώρα ας τους κάνουμε να κινηθούν!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Ακολουθεί το τελευταίο demo για άλλη μια φορά:

Ο φορτωτής κύβων προόδου

Ας χρησιμοποιήσουμε την ίδια τεχνική για να δημιουργήσουμε ένα τρισδιάστατο πρόγραμμα φόρτωσης προόδου. Ναι, ακόμα μόνο ένα στοιχείο!

Δεν αλλάζουμε τίποτα όσον αφορά την προσομοίωση του κύβου με τον ίδιο τρόπο που κάναμε πριν, εκτός από την αλλαγή του ύψους και του λόγου διαστάσεων του φορτωτή. Το κινούμενο σχέδιο που φτιάχνουμε βασίζεται σε μια εκπληκτικά εύκολη τεχνική όπου ενημερώνουμε το πλάτος της αριστερής πλευράς ενώ η δεξιά πλευρά γεμίζει τον υπόλοιπο χώρο, χάρη στο flex-grow: 1.

Το πρώτο βήμα είναι να προσθέσετε κάποια διαφάνεια στη δεξιά πλευρά χρησιμοποιώντας opacity:

Αυτό προσομοιώνει το αποτέλεσμα ότι η μία πλευρά του κύβου γεμίζει ενώ η άλλη είναι άδεια. Στη συνέχεια ενημερώνουμε το χρώμα της αριστερής πλευράς. Για να γίνει αυτό, είτε ενημερώνουμε τα τρία χρώματα μέσα στην κωνική κλίση είτε το κάνουμε προσθέτοντας ένα χρώμα φόντου με ένα background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

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

Ας κάνουμε κίνηση στο πλάτος της αριστερής πλευράς του φορτωτή:

Ωχ, το animation είναι λίγο περίεργο στην αρχή! Παρατηρήστε πώς ξεκινάει έξω από τον κύβο; Αυτό συμβαίνει επειδή ξεκινάμε το animation στο 0% πλάτος. Όμως λόγω του clip-path και αρνητικό περιθώριο που χρησιμοποιούμε, αυτό που πρέπει να κάνουμε είναι να ξεκινήσουμε από το δικό μας --_d μεταβλητή, την οποία χρησιμοποιήσαμε για να ορίσουμε το clip-path πόντοι και το αρνητικό περιθώριο:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

Αυτό είναι λίγο καλύτερο:

Αλλά μπορούμε να κάνουμε αυτό το κινούμενο σχέδιο ακόμα πιο ομαλό. Παρατηρήσατε ότι μας λείπει κάτι; Επιτρέψτε μου να σας δείξω ένα στιγμιότυπο οθόνης για να συγκρίνετε πώς θα πρέπει να είναι το τελικό demo με αυτό το τελευταίο demo:

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

Μπορούμε να προσθέσουμε μια διαβάθμιση στο κύριο στοιχείο και να το αποκόψουμε όπως κάναμε με το ψευδώνυμο:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Ακολουθεί ο πλήρης κωδικός όταν όλα συνδυάζονται:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

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

Περισσότερα 3D

Μπορούμε ακόμα να προχωρήσουμε περισσότερο και να προσομοιώσουμε έναν άπειρο αριθμό τρισδιάστατων κύβων χρησιμοποιώντας ένα στοιχείο — ναι, είναι δυνατό! Εδώ είναι ένα πλέγμα από κύβους:

Αυτή η επίδειξη και οι ακόλουθες επιδείξεις δεν υποστηρίζονται στο Safari τη στιγμή της σύνταξης.

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

Χρησιμοποιούμε πρώτα α conic-gradient για να δημιουργήσετε το επαναλαμβανόμενο μοτίβο κύβου. Η επανάληψη του μοτίβου ελέγχεται από τρεις μεταβλητές:

• --size: Σύμφωνα με το όνομά του, αυτό ελέγχει το μέγεθος κάθε κύβου.
• --m: Αυτό αντιπροσωπεύει τον αριθμό των στηλών.
• --n: Αυτός είναι ο αριθμός των σειρών.
• --gap: αυτό είναι το κενό ή η απόσταση μεταξύ των κύβων

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Στη συνέχεια εφαρμόζουμε ένα στρώμα μάσκας χρησιμοποιώντας ένα άλλο σχέδιο που έχει το ίδιο μέγεθος. Αυτό είναι το πιο δύσκολο κομμάτι αυτής της ιδέας. Χρησιμοποιώντας έναν συνδυασμό α linear-gradient και σε έναν conic-gradient θα κόψουμε μερικά μέρη του στοιχείου μας για να διατηρούνται ορατά μόνο τα σχήματα κύβου.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

Ο κώδικας μπορεί να φαίνεται λίγο περίπλοκος, αλλά χάρη στις μεταβλητές CSS το μόνο που χρειάζεται να κάνουμε είναι να ενημερώσουμε μερικές τιμές για να ελέγξουμε τη μήτρα των κύβων μας. Χρειάζεστε ένα πλέγμα 10⨉10; Ενημερώστε το --m και --n μεταβλητές σε 10. Χρειάζεστε μεγαλύτερο κενό μεταξύ των κύβων; Ενημερώστε το --gap αξία. Οι τιμές χρωμάτων χρησιμοποιούνται μόνο μία φορά, επομένως ενημερώστε αυτές για μια νέα παλέτα χρωμάτων!

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

Αυτός ο φορτωτής ορίζει τέσσερις κύβους σε μία μόνο σειρά. Αυτό σημαίνει το δικό μας --n η τιμή είναι 4 και --m είναι ίσο με 1 . Με άλλα λόγια, αυτά δεν τα χρειαζόμαστε πλέον!

Αντίθετα, μπορούμε να εργαστούμε με το --size και --gap μεταβλητές σε ένα κοντέινερ πλέγματος:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

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

Ας βεβαιωθούμε ότι το μοτίβο κύβου μας έχει ρυθμιστεί για το πλάτος τεσσάρων κύβων. Θα το κάνουμε αυτό στο κοντέινερ ::before ψευδοστοιχείο:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Τώρα που έχουμε τέσσερις κύβους σε ένα δοχείο τριών κύβων, μπορούμε να δικαιολογήσουμε το μοτίβο του κύβου στο τέλος του δοχείου πλέγματος για να ξεχειλίσει, δείχνοντας τους τρεις τελευταίους κύβους:

.loader { /* same as before */ justify-content: end;
}

Εδώ είναι τι έχουμε μέχρι στιγμής, με ένα κόκκινο περίγραμμα για να δείχνει τα όρια του κοντέινερ πλέγματος:

Τώρα το μόνο που έχουμε να κάνουμε είναι να μετακινήσουμε το ψευδοστοιχείο προς τα δεξιά προσθέτοντας την κινούμενη εικόνα μας:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Καταλάβατε το κόλπο του animation; Ας το τελειώσουμε αποκρύπτοντας το ξεχειλισμένο μοτίβο κύβου και προσθέτοντας μια πινελιά κάλυψης για να δημιουργήσουμε αυτό το εφέ ξεθώριασμα όπως η αρχή και το τέλος:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Μπορούμε να το κάνουμε αυτό πολύ πιο ευέλικτο εισάγοντας μια μεταβλητή, --n, για να ορίσετε πόσοι κύβοι θα εμφανίζονται στο κοντέινερ ταυτόχρονα. Και δεδομένου ότι ο συνολικός αριθμός των κύβων στο σχέδιο θα πρέπει να είναι ένας περισσότερος από --n, μπορούμε να το εκφράσουμε ως calc(var(--n) + 1).

Εδώ είναι το πλήρες:

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

Θα βασιστούμε σε ένα κινούμενο φόντο με background-blend-mode για αυτό:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

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

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

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

Μπορούμε να ενημερώσουμε τον αριθμό των κύβων για να τον κάνουμε μεταβλητό;

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

Οι παραλλαγές άφθονες!

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

Αυτό είναι ένα περιτύλιγμα

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

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

---

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

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