Πώς να δημιουργήσετε μια ευχάριστη οθόνη φόρτωσης σε 5 λεπτά

Πρώτον, εδώ θα χτίσουμε. Ρυθμίστε το χρονοδιακόπτη σας!

Φαίνεται οικείο;

Εάν ναι, αυτό συμβαίνει επειδή το έχετε δει κάπου - Slack!

Ας μάθουμε μερικά πράγματα δημιουργώντας αυτό μόνο με CSS και λίγο καλό HTML.

Εάν είστε ενθουσιασμένοι για τη σύνταξη κάποιου κώδικα, μπείτε στο Codepen και δημιουργήστε ένα νέο στυλό.

Τώρα, ας πάμε!

1. Η σήμανση

Η σήμανση που απαιτείται για αυτό είναι αρκετά απλή. Εδώ είναι:

For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme
 - Your friends at Slack; 

Απλό, ε;

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

Υπάρχει μια δέσμη κειμένων και ένα .loading__animεύρος για την «πλαστοπροσωπία» του κινούμενου εικονιδίου.

Το αποτέλεσμα αυτού είναι η απλή προβολή παρακάτω.

2. Κεντράρετε το περιεχόμενο

Το αποτέλεσμα δεν είναι το πιο όμορφο πράγμα που βλέπεις. Ας .loadingεισαχθεί ολόκληρο το στοιχείο ενότητας στη σελίδα.

body { display: flex; justify-content: center; align-items: center; min-height: 100vh;}

Ψάχνετε καλύτερα;

3. Στυλ στο κείμενο φόρτωσης

Ξέρω. Θα φτάσουμε σύντομα στα κινούμενα πράγματα. Προς το παρόν, ας διαμορφώσουμε το .loadingκείμενο ώστε να φαίνεται πολύ καλύτερο.

.loading { max-width: 50%; line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center;}

4. Στυλ στο κείμενο του συγγραφέα για να φαίνεται ελαφρώς διαφορετικό.

.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block;}

Ορίστε!

5. Δημιουργήστε τον κινούμενο φορτωτή

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

Εάν κολλήσετε, ρίξτε ένα σχόλιο και θα χαρώ να σας βοηθήσω.

Γεια, ρίξτε μια ματιά στον φορτωτή ξανά.

Θα παρατηρήσετε ότι το ήμισυ της διαδρομής του είναι μπλε και το άλλο μισό είναι γκρι. Εντάξει, έχει επιλυθεί. Επίσης, τα HTMLστοιχεία δεν είναι στρογγυλοποιημένα από προεπιλογή. Όλα είναι ένα στοιχείο κουτιού . Η πρώτη πραγματική πρόκληση θα είναι πώς να δώσουμε στο .loading__animστοιχείο μισά σύνορα.

Μην ανησυχείτε αν δεν το καταλαβαίνετε ακόμα. Θα επανέλθω σε αυτό.

Αρχικά, ας ταξινομήσουμε τις διαστάσεις του φορτωτή.

.loading__anim { width: 35px; height: 35px; }

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

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

.loading__anim { width: 35px; height: 35px; display: inline-block; }

Τέλος, ας βεβαιωθούμε ότι ο φορτωτής έχει ορισμένο περίγραμμα.

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); }

Αυτό θα δώσει ένα γκρίζο5px περίγραμμα γύρω από το στοιχείο.

Τώρα, εδώ είναι το αποτέλεσμα αυτού.

Όχι τόσο υπέροχο - ακόμα. Ας το κάνουμε ακόμα καλύτερο.

Ένα στοιχείο που έχει τέσσερις πλευρές, top, bottom, left, καιright

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

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

Δεν έχει σημασία ποιες πλευρές επιλέγετε. Έχω χρησιμοποιήσει τις παρακάτω topκαι τις leftπλευρές

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); }

Τώρα, leftκαι οι topπλευρές θα έχουν ένα μπλε χρώμα για τα σύνορά τους. Εδώ είναι το αποτέλεσμα αυτού:

Φτάνουμε κάπου!

Ο φορτωτής είναι στρογγυλός, ΟΧΙ ορθογώνιος. Ας το αλλάξουμε δίνοντας το .loader__animστοιχείο border-radiusτου50%

Τώρα έχουμε αυτό:

Όχι τόσο άσχημα, ε;

Το τελευταίο βήμα είναι να το κάνετε αυτό.

@keyframes rotate { to { transform: rotate(1turn) }}

Ας ελπίσουμε ότι έχετε μια ιδέα για το πώς λειτουργούν τα κινούμενα σχέδια CSS. 1turnείναι ίσο με 360deg, δηλαδή μια πλήρης στροφή περιστρέφεται 360 μοίρες.

Και εφαρμόστε το ως εξής:

animation: rotate 600ms infinite linear;

Ναι! Τα καταφέραμε. Όλα αυτά έχουν νόημα;

Παρεμπιπτόντως, δείτε το αποτέλεσμα παρακάτω:

Πολύ ωραίο, ε;

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

Είστε έτοιμοι να γίνετε επαγγελματίες;

Έχω δημιουργήσει έναν δωρεάν οδηγό CSS για να αποκτήσω αμέσως τις δεξιότητές σας CSS. Αποκτήστε το δωρεάν ebook.