Πώς να οικοδομήσουμε ένα spinner εμπνευσμένο από το Reddit με μόνο HTML και CSS

Φόρτωση spinner εμπνευσμένη από την εφαρμογή Reddit για κινητά.

Η εφαρμογή για κινητά του Reddit διαθέτει έναν εντυπωσιακό κλώστη φόρτωσης που θυμίζει τροχιακά σώματα γύρω από έναν πλανήτη ή ένα αστέρι. Οι περισσότεροι προγραμματιστές θα έφταναν για JavaScript ή SVG για μια εργασία όπως αυτή, αλλά χάρη στο animation-iteration-count: infinite; και μερικές άλλες αμυχές και κόλπα, που δεν είναι καν απαραίτητες. Σήμερα θα σας δείξω πώς να κωδικοποιήσετε ένα κλώστη που εμπνέεται από το Reddit καθαρά σε HTML και CSS!

Εδώ είναι το τελικό αποτέλεσμα:

Βασική ρύθμιση

Ας αρχίσουμε γράφοντας κάποια στοιχεία HTML DOM πάνω στα οποία μπορούμε να προσαρμόζουμε τον κεντρικό κύκλο και κάθε μια από τις περιστρεφόμενες τροχιές.

  ...

  ...

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

Στο παραπάνω παράδειγμα κώδικα, οι ελλείψεις (...) στέκονται για τα τόξα και περιστρέφονται γύρω από τα "φεγγάρια". Τόσο ο εσωτερικός όσο και ο εξωτερικός δακτύλιος κάθε ένα περιέχει δύο τόξα και δύο φεγγάρια, αλλά για λόγους που θα γίνουν σαφείς αργότερα, αποτελείται στην πραγματικότητα από δύο σχήματα CSS, οπότε χρειαζόμαστε συνολικά οκτώ τόξα και τέσσερα φεγγάρια. Το πλήρες κείμενο HTML μοιάζει με αυτό:

     
  
  
  
     
  
  
     
  
  
  
     
  
  

CSS Σχήματα

Είναι δυνατό να σχεδιάσετε κύκλους και τόξα στο CSS δημιουργώντας απλά ένα τετράγωνο

και καθορίζοντας την ακτίνα ακρών στο 50%.

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

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

Για να σχεδιάσετε τμήματα κύκλων ακανόνιστου μήκους σε CSS απαιτεί ένα κομμάτι ενός hack. Για να γίνει αυτό, πρέπει να σχεδιάσουμε δύο γειτονικά τμήματα τόξου 90 μοιρών και να περιστρέψουμε ένα ελαφρώς ώστε να επικαλύπτονται, αφήνοντας ένα εμφανές τμήμα τόξου περίπου 160 μοιρών.

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

Ρύθμιση του CSS

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

html {
  --spinner: # 1EAAF0;
  - κέντρο: μεταφράστε (-50%, -50%).
}}

Τώρα μπορούμε να προχωρήσουμε και να σχεδιάσουμε τον κεντρικό κύκλο.

.center {
   θέση: απόλυτη;
   πλάτος: 30px;
   ύψος: 30px;
   φόντο: var (- κλώστης);
   ακτίνα ακτίνας: 50%.
   κορυφή: 50%;
   αριστερά: 50%.
   μετασχηματισμός: var (- κέντρο);
}}

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

.ου-spin, .inner-spin {
  θέση: απόλυτη;
  κορυφή: 50%;
  αριστερά: 50%.
}}

Σχεδίαση των τροχιακών

Ο κλώστης φόρτωσης είναι βασικά μια σειρά από ομόκεντρους κύκλους, οπότε ας επικεντρωθούμε πρώτα στην κατάρτιση μόνο ενός τόξου.

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

.inner-arc {
  πλάτος: 62px;
  ύψος: 62px;
}}
.inner-arc_start-a {
  Χρώμα περιγράμματος: Διαφανές διαφανές διαφανές πράσινο.
  / * ΣΗΜΕΙΩΣΗ: η σειρά εδώ είναι πολύ σημαντική! * /
  μετασχηματισμός: var (- κέντρο) περιστροφή (0deg);
}}
.inner-arc_end-a {
  Χρώμα περιγράμματος: κόκκινο διαφανές διαφανές διαφανές.
  μετασχηματισμός: var (- κέντρο) περιστροφή (0deg);
}}

Ο πρώτος μετασχηματισμός επικεντρώνει το

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

Δεδομένου ότι τα τόξα σχηματίζονται από τα τέσσερα περιγράμματα ενός τετραγώνου <div>, τα τόξα δεν ευθυγραμμίζονται με καρτεσιανά τεταρτημόρια να είναι προεπιλεγμένα.

Παρατηρήστε ότι τα τόξα δεν ευθυγραμμίζονται με τις διασταυρώσεις x στον κύκλο της μονάδας. Για να το διορθώσουμε και να κάνουμε τα τόξα πιο εύκολα, περιστρέφουμε τα τόξα κατά 45 μοίρες. Στη συνέχεια περιστρέφουμε ελαφρά ένα από τα τόξα για να δημιουργήσουμε ένα συνολικό μήκος τόξου περίπου 160 μοίρες.

.inner-arc_start-a {
  Χρώμα περιγράμματος: Διαφανές διαφανές διαφανές πράσινο.
  μετασχηματισμός: var (- κέντρο) περιστροφή (65deg);
}}
.inner-arc_end-a {
  Χρώμα περιγράμματος: κόκκινο διαφανές διαφανές διαφανές.
  μετασχηματισμός: var (- κέντρο) περιστροφή (45deg);
}}
Επικαλυπτόμενο τόξο 160 βαθμών περιστρέφεται για να ευθυγραμμιστεί με το (1, 0) στον κύκλο της μονάδας.

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

Αυτό οδηγεί σε λίγους "μαγικούς αριθμούς" που θα μπορούσαμε να ελαχιστοποιήσουμε εάν θέλαμε να ορίσουμε περισσότερες μεταβλητές CSS και να χρησιμοποιήσουμε τη λειτουργία calc (). Αυτό φαίνεται λίγο εμπλεκόμενο όμως, γι 'αυτό τώρα θα τοποθετήσω τον κύκλο με την τιμή pixel για τώρα.

.inner-moon-a {
   θέση: απόλυτη;
   κορυφή: 50%;
   αριστερά: 50%.
   πλάτος: 12px;
   ύψος: 12px;
   φόντο: κόκκινο;
   ακτίνα ακτίνας: 50%.
   μετασχηματισμός: var (- κέντρο) μετάφραση (33px, 0);
}}
Το πρώτο φεγγάρι ευθυγραμμίζεται με την ουρά του.

Στη συνέχεια, σχεδιάζουμε δύο ακόμα τόξα, αλλά αυτή τη φορά χρησιμοποιούμε τον μετασχηματισμό της κλίμακας (-1, -1). Αυτό περιστρέφει τα τόξα διαμέσου και των δύο αξόνων x και y, ουσιαστικά αντικατοπτρίζοντας το contrail.

.inner-arc_start-b {
  Χρώμα περιγράμματος: διαφανές διαφανές διάφανο var (- κλώστης).
  μετασχηματισμός: κλίμακα var (- κέντρο) περιστροφής (65deg) (-1, -1);
}}
.inner-arc_end-b {
  όριο χρώματος: var (- κλώστης) διαφανές διαφανές διαφανές,
  μετασχηματισμός: κλίμακα var (- κέντρο) περιστροφή (45deg) (-1, -1);

Τέλος, για την εξωτερική τροχιά, απλά επαναλαμβάνουμε το CSS από την εσωτερική τροχιά, αλλά ορίζουμε ένα μεγαλύτερο

ύψος και πλάτος! (Φανταστείτε πόσο σύντομα αυτό το CSS θα μπορούσε να είναι με SASS mixins!)

.u-arc {
  πλάτος: 100px;
  ύψος: 100px;
}}

Προσθήκη του Animation

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

@keyframes περιστροφή {100% {μετασχηματισμός: περιστροφή (360deg); }}

Το αναγνωριστικό "spin" συνδέει τα βασικά καρέ πίσω με τα χαρακτηριστικά κινούμενων εικόνων που θα προσθέσουμε μέσα σε κάθε γονικό στοιχείο

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

.outer-spin {
  κινούμενα σχέδια: spin 4s γραμμική άπειρη?
}}
.inner-spin {
  κινούμενα σχέδια: spin 3s γραμμική άπειρη?
}}
(Πηγή εικόνας.)

Αυτό είναι!

Ο κώδικας για αυτό το σεμινάριο βρίσκεται στο CodePen.io. Παρακαλώ σχολιάστε - ή Tweet σε εμένα @PleathrStarfish - αν έχετε μια πρόταση, παρατήρηση, ή ένα δροσερό πιρούνι του κώδικα μου!