Η δημιουργία φορτωτών μόνο για CSS είναι μια από τις αγαπημένες μου εργασίες. Είναι πάντα ικανοποιητικό να βλέπεις αυτά τα άπειρα κινούμενα σχέδια. Και, φυσικά, υπάρχουν πλήθος τεχνικών και προσεγγίσεων για την κατασκευή τους — δεν χρειάζεται κοιτάξτε πιο μακριά από το CodePen για να δούμε πόσα. Σε αυτό το άρθρο, ωστόσο, θα δούμε πώς να φτιάξετε έναν φορτωτή μεμονωμένου στοιχείου που θα γράφει όσο το δυνατόν λιγότερο κώδικα.
Έχω δημιούργησε μια συλλογή με περισσότερους από 500 single div loaders και σε αυτή τη σειρά τεσσάρων μερών, θα μοιραστώ τα κόλπα που χρησιμοποίησα για να δημιουργήσω πολλά από αυτά. Θα καλύψουμε έναν τεράστιο αριθμό παραδειγμάτων, δείχνοντας πόσο μικρές προσαρμογές μπορούν να οδηγήσουν σε διασκεδαστικές παραλλαγές και πόσο λίγο κώδικα χρειαζόμαστε να γράψουμε για να πραγματοποιηθούν όλα!
Σειρά Single-Element Loaders:
- Single Element Loaders: The Spinner — είστε εδώ
- Single Element Loaders: The Dots — ερχεται στις 17 Ιουνίου
- Single Element Loaders: The Bars — ερχεται στις 24 Ιουνίου
- Single Element Loaders: Going 3D — έρχεται 1 Ιουλίου
Για αυτό το πρώτο άρθρο, πρόκειται να δημιουργήσουμε ένα από τα πιο κοινά μοτίβα φορτωτή: περιστρεφόμενες ράβδους:
Εδώ είναι η προσέγγιση
Μια ασήμαντη υλοποίηση για αυτόν τον φορτωτή είναι να δημιουργήσετε ένα στοιχείο για κάθε γραμμή τυλιγμένη μέσα σε ένα γονικό στοιχείο (για εννέα συνολικά στοιχεία) και μετά να παίξετε με 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.
Σειρά Single-Element Loaders:
- Single Element Loaders: The Spinner — είστε εδώ
- Single Element Loaders: The Dots — ερχεται στις 17 Ιουνίου
- Single Element Loaders: The Bars — ερχεται στις 24 Ιουνίου
- Single Element Loaders: Going 3D — έρχεται 1 Ιουλίου
Single Element Loaders: The Spinner δημοσιεύθηκε αρχικά στις CSS-Κόλπα. Θα έπρεπε λάβετε το ενημερωτικό δελτίο.
- "
- 10
- 3d
- a
- Σχετικα
- Πρόσθετος
- προηγμένες
- Όλα
- επιτρέπει
- πάντοτε
- Άλλος
- Εφαρμογή
- εφαρμόζοντας
- προσεγγίσεις
- ΠΕΡΙΟΧΗ
- άρθρο
- φόντο
- μπαρ
- Βασικα
- επειδή
- πριν
- Αρχή
- είναι
- παρακάτω
- μεταξύ
- Κομμάτι
- Κουτί
- πρόγραμμα περιήγησης
- Κτίριο
- τσαμπί
- αλλαγή
- Κύκλος
- κωδικός
- συλλογή
- σε συνδυασμό
- Κοινός
- έννοια
- διαμόρφωση
- Εξετάστε
- περιεχόμενο
- έλεγχος
- θα μπορούσε να
- Ζευγάρι
- κάλυμμα
- δημιουργία
- δημιουργήθηκε
- δημιουργεί
- δημιουργία
- Τη στιγμή
- συμφωνία
- Σε συνάρτηση
- καθέκαστα
- DID
- διαφορετικές
- Διάσταση
- Display
- κάτω
- εύκολα
- αποτέλεσμα
- στοιχεία
- κ.λπ.
- ακριβώς
- παράδειγμα
- παραδείγματα
- Άσκηση
- εξασθενίσει
- Εικόνα
- Όνομα
- ταιριάζουν
- Εξής
- εξής
- από
- διασκέδαση
- περαιτέρω
- Δίνοντας
- Ματιά
- μετάβαση
- καλός
- μεγαλύτερη
- Πλέγμα
- ύψος
- εδώ
- Πως
- Πώς να
- HTTPS
- τεράστιος
- ιδέα
- ιδεών
- εικόνα
- εικόνες
- εκτέλεση
- σημαντικό
- Σε άλλες
- αύξηση
- IT
- Ιούλιος
- οδηγήσει
- ΜΑΘΑΊΝΩ
- Επίπεδο
- γραμμές
- λίγο
- φορτίο
- ματιά
- κοιτάζοντας
- που
- κάνω
- ΚΑΝΕΙ
- μάσκα
- Masks
- ύλη
- μέσα
- ενδέχεται να
- περισσότερο
- αριθμός
- Βελτιστοποίηση
- ΑΛΛΑ
- αλλιώς
- φόρμες
- δική
- Δοκιμάστε να παίξετε
- θέση
- δυνατός
- προηγούμενος
- περιουσία
- ερώτηση
- RE
- φθάσουν
- Πραγματικότητα
- υπόλοιπα
- Απαιτεί
- Safari
- Είπε
- ίδιο
- Σειρές
- σειρά
- Shape
- σχήματα
- Κοινοποίηση
- παρόμοιες
- Απλούς
- ενιαίας
- Μέγεθος
- small
- So
- στέρεο
- μερικοί
- Χώρος
- χώρων
- πλατεία
- Ακόμη
- υποστήριξη
- Πατήστε
- εργασίες
- τεχνικές
- Η
- πράγμα
- ώρα
- κορυφή
- αφή
- Μεταμορφώστε
- Διαφάνεια
- Ταξιδεύει
- Ενημέρωση
- us
- χρήση
- αξία
- W3
- Τι
- ενώ
- εντός
- χωρίς
- λόγια
- εργαζόμενος
- γραφή