Νοημοσύνη δεδομένων Πλάτωνα.
Κάθετη Αναζήτηση & Αι.

Single Element Loaders: The Dots

Ημερομηνία:

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

Dot loaders είναι παντού. Είναι προσεγμένα γιατί συνήθως αποτελούνται από τρεις τελείες που μοιάζουν με έλλειψη κειμένου (…) που χορεύει τριγύρω.

Σειρά άρθρων

  • Single Element Loaders: The Spinner
  • Single Element Loaders: The Dots — είστε εδώ
  • Single Element Loaders: The Bars — ερχεται στις 24 Ιουνίου
  • Single Element Loaders: Going 3D — έρχεται 1 Ιουλίου

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

Αυτό το παράδειγμα φόρτωσης παραπάνω δημιουργείται με ένα μόνο στοιχείο div, μερικές δηλώσεις CSS και χωρίς ψευδοστοιχεία. Συνδυάζω δύο τεχνικές χρησιμοποιώντας CSS background και mask. Και όταν τελειώσουμε, θα δούμε πώς η κίνηση μιας κλίσης φόντου βοηθά στη δημιουργία της ψευδαίσθησης κάθε κουκκίδας που αλλάζει χρώματα καθώς κινούνται διαδοχικά προς τα πάνω και προς τα κάτω.

Το κινούμενο σχέδιο φόντου

Ας ξεκινήσουμε με την κινούμενη εικόνα φόντου:

.loader {
  width: 180px; /* this controls the size */
  aspect-ratio: 8/5; /* maintain the scale */
  background: 
    conic-gradient(red   50%, blue   0) no-repeat, /* top colors */
    conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */
  background-size: 200% 50%; 
  animation: back 4s infinite linear; /* applies the animation */
}

/* define the animation */
@keyframes back {
  0%,                       /* X   Y , X     Y */
  100% { background-position: 0%   0%, 0%   100%; }
  25%  { background-position: 100% 0%, 0%   100%; }
  50%  { background-position: 100% 0%, 100% 100%; }
  75%  { background-position: 0%   0%, 100% 100%; }
}

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

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

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

Στο κινούμενο σχέδιο, παρατηρήστε ότι το πρώτο στρώμα είναι Y=0% (τοποθετείται στην κορυφή) ενώ X είναι αλλαγές από 0% προς την 100%. Για το δεύτερο στρώμα, έχουμε το ίδιο για X αλλά Y=100% (τοποθετείται στο κάτω μέρος).

Γιατί να χρησιμοποιήσετε ένα conic-gradient() αντί του linear-gradient()?

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

linear-gradient(90deg, red 50%, blue 0)

Αλλά μπορούμε επίσης να φτάσουμε στο ίδιο χρησιμοποιώντας α conic-gradient() — και με λιγότερο κώδικα. Μειώνουμε τον κώδικα και μαθαίνουμε επίσης ένα νέο κόλπο στη διαδικασία!

Η ολίσθηση των χρωμάτων προς τα αριστερά και προς τα δεξιά είναι ένας ωραίος τρόπος για να φαίνεται ότι αλλάζουμε χρώματα, αλλά ίσως είναι καλύτερο να αλλάξουμε αμέσως χρώματα - με αυτόν τον τρόπο, δεν υπάρχει πιθανότητα μια κουκκίδα φόρτωσης να αναβοσβήνει δύο χρώματα ταυτόχρονα . Για να γίνει αυτό, ας αλλάξουμε το animationσυνάρτηση χρονισμού από linear προς την steps(1)

Οι τελείες φόρτωσης

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

Θα χρησιμοποιήσουμε radial-gradient() για αυτό:

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  mask:
    radial-gradient(#000 68%, #0000 71%) no-repeat,
    radial-gradient(#000 68%, #0000 71%) no-repeat,
    radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask-size: 25% 40%; /* the size of our dots */
}

Υπάρχει κάποιος διπλότυπος κώδικας εκεί, οπότε ας φτιάξουμε μια μεταβλητή CSS για να περιορίσουμε τα πράγματα:

.loader {
  width: 180px;
  aspect-ratio: 8/5;
  --_g: radial-gradient(#000 68%, #0000 71%) no-repeat;
  mask: var(--_g),var(--_g),var(--_g);
  mask-size: 25% 40%;
}

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

.loader {
  /* same as before */
  animation: load 2s infinite;
}

@keyframes load {      /* X  Y,     X   Y,    X   Y */
  0%     { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } /* all of them at the top */
  16.67% { mask-position: 0% 100%, 50% 0%  , 100% 0%; }
  33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; }
  50%    { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */
  66.67% { mask-position: 0% 0%  , 50% 100%, 100% 100%; }
  83.33% { mask-position: 0% 0%  , 50% 0%  , 100% 100%; }
  100%   { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } /* all of them at the top */
}

Ναι, πρόκειται για συνολικά τρεις ακτινικές διαβαθμίσεις εκεί μέσα, όλες με την ίδια διαμόρφωση και το ίδιο μέγεθος — το κινούμενο σχέδιο θα ενημερώσει τη θέση του καθενός. Σημειώστε ότι το X η συντεταγμένη κάθε κουκκίδας είναι σταθερή. ο mask-position ορίζεται έτσι ώστε η πρώτη τελεία να βρίσκεται στα αριστερά (0%), το δεύτερο στο κέντρο (50%), και το τρίτο στα δεξιά (100%). Ενημερώνουμε μόνο το Y συντονίζω από 0% προς την 100% να κάνουν τις τελείες να χορεύουν.

Να τι παίρνουμε:

Τώρα, συνδυάστε το με το ντεγκραντέ κινούμενα σχέδια μας και η μαγεία αρχίζει να συμβαίνει:

Παραλλαγές Dot loader

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

Τι γίνεται με μια άλλη κίνηση για τις τελείες μας;

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

Η τεχνική κινούμενων εικόνων που χρησιμοποίησα για τα επίπεδα μάσκας μπορεί επίσης να χρησιμοποιηθεί με επίπεδα φόντου για τη δημιουργία πολλών διαφορετικών φορτωτών με ένα μόνο χρώμα. Έγραψα ένα λεπτομερές άρθρο για αυτό. Θα δείτε ότι από την ίδια δομή κώδικα μπορούμε να δημιουργήσουμε διαφορετικές παραλλαγές αλλάζοντας απλώς μερικές τιμές. Μοιράζομαι μερικά παραδείγματα στο τέλος του άρθρου.

Γιατί όχι φορτωτής με μία κουκκίδα;

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

Εδώ είναι ένα άλλο παράδειγμα loader όπου κάνω επίσης animation radial-gradient σε συνδυασμό με Φίλτρα CSS και mix-blend-mode για να δημιουργήσετε ένα blobby εφέ:

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

Αν θέλετε να καταλάβετε τη μαγεία πίσω από αυτό το εφέ blob, μπορείτε να ανατρέξετε αυτές οι διαδραστικές διαφάνειες (μόνο για Chrome) από Ana Tudor γιατί καλύπτει τόσο καλά το θέμα!

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

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

Α, και σημειώστε πώς αυτή η επίδειξη χρησιμοποιεί το CSS Grid. Αυτό μας επιτρέπει να αξιοποιήσουμε την προεπιλογή του δικτύου stretch ευθυγράμμιση έτσι ώστε και τα δύο ψευδοστοιχεία να καλύπτουν ολόκληρη την περιοχή του γονέα τους. Δεν χρειάζεται διαστασιολόγηση! Σπρώξτε λίγο γύρω γύρω με translate() και είμαστε έτοιμοι.

Περισσότερα παραδείγματα!

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

Επόμενο…

Εντάξει, καλύψαμε λοιπόν τα dot loaders σε αυτό το άρθρο και τα spinner στο τελευταίο. Στο επόμενο άρθρο αυτής της σειράς τεσσάρων μερών, θα στρέψουμε την προσοχή μας σε έναν άλλο κοινό τύπο φορτωτή: τα μπαρ. Θα πάρουμε πολλά από αυτά που μάθαμε μέχρι στιγμής και θα δούμε πώς μπορούμε να τα επεκτείνουμε για να δημιουργήσουμε ακόμη ένα πρόγραμμα φόρτωσης ενός στοιχείου με όσο το δυνατόν λιγότερο κώδικα και όσο το δυνατόν μεγαλύτερη ευελιξία.

Σειρά άρθρων

  • Single Element Loaders: The Spinner
  • Single Element Loaders: The Dots — είστε εδώ
  • Single Element Loaders: The Bars — ερχεται στις 24 Ιουνίου
  • Single Element Loaders: Going 3D — έρχεται 1 Ιουλίου
spot_img

Τελευταία Νοημοσύνη

spot_img