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

Έχω δημιούργησε μια συλλογή με περισσότερους από 500 single div loaders και σε αυτή τη σειρά τεσσάρων μερών, θα μοιραστώ τα κόλπα που χρησιμοποίησα για να δημιουργήσω πολλά από αυτά. Θα καλύψουμε έναν τεράστιο αριθμό παραδειγμάτων, δείχνοντας πόσο μικρές προσαρμογές μπορούν να οδηγήσουν σε διασκεδαστικές παραλλαγές και πόσο λίγο κώδικα χρειαζόμαστε να γράψουμε για να πραγματοποιηθούν όλα!

Για αυτό το πρώτο άρθρο, πρόκειται να δημιουργήσουμε ένα από τα πιο κοινά μοτίβα φορτωτή: περιστρεφόμενες ράβδους:

Εδώ είναι η προσέγγιση

Μια ασήμαντη υλοποίηση για αυτόν τον φορτωτή είναι να δημιουργήσετε ένα στοιχείο για κάθε γραμμή τυλιγμένη μέσα σε ένα γονικό στοιχείο (για εννέα συνολικά στοιχεία) και μετά να παίξετε με 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 για να τοποθετήσετε τις υπόλοιπες ράβδους. Τοποθετήστε το δείκτη του ποντικιού στο παρακάτω demo για να δείτε το κόλπο:

Ρύθμιση αδιαφάνειας

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

Γιατί όχι κουκκίδες;

Μπορούμε να το κάνουμε πλήρως:

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

Παρακάτω είναι ένα σχήμα για την απεικόνιση της νέας διαμόρφωσης κλίσης:

Εάν χρησιμοποιείτε το Safari, σημειώστε ότι η επίδειξη μπορεί να είναι buggy. Αυτό συμβαίνει επειδή το 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;
}

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

Εδώ είναι μια άλλη ιδέα για ένα spinner loader παρόμοιο με το προηγούμενο.

Για αυτό βασίζομαι μόνο σε αυτό background και mask για να δημιουργήσετε το σχήμα (δεν χρειάζονται ψευδοστοιχεία). Ορίζω επίσης τη διαμόρφωση με μεταβλητές CSS ώστε να μπορώ να δημιουργήσω πολλές παραλλαγές από τον ίδιο κώδικα - ένα άλλο παράδειγμα μόνο των δυνατοτήτων των μεταβλητών CSS. Έγραψα ένα άλλο άρθρο για αυτήν την τεχνική αν θέλετε περισσότερες λεπτομέρειες.

Σημειώστε ότι ορισμένα προγράμματα περιήγησης εξακολουθούν να βασίζονται σε α -webkit- πρόθεμα για mask-composite με το δικό του σύνολο τιμών και δεν θα εμφανίσει το spinner στην επίδειξη. Εδώ είναι ένας τρόπος για να το κάνετε χωρίς mast-composite για περισσότερη υποστήριξη προγράμματος περιήγησης.

Σας έχω άλλο ένα:

Για αυτό, χρησιμοποιώ ένα background-color για τον έλεγχο του χρώματος και τη χρήση mask και mask-composite για να δημιουργήσετε το τελικό σχήμα:

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

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

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

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