Γεννήτρια CSS Loader

Τι είναι αυτό το εργαλείο;

Ένα CSS loader είναι ένα μικρό κινούμενο στοιχείο — ένα περιστρεφόμενο δαχτυλίδι, αναπηδώντα τελείες, ένας παλλόμενος κύκλος, ή μια κινούμενη μπάρα προόδου — που χρησιμοποιείται για να δείξει ότι περιεχόμενο φορτώνεται, χωρίς βρόχο κίνησης JavaScript και χωρίς να απαιτείται εικόνα ή GIF. Χτίζεται από μερικούς κανόνες CSS συν ένα μπλοκ @keyframes που ορίζει πώς κινείται το στοιχείο με τον χρόνο.

Αυτό το εργαλείο παράγει τέσσερα συνηθισμένα μοτίβα loader με πραγματικό, λειτουργικό CSS: ένα περιστρεφόμενο spinner βασισμένο σε border, τρεις τελείες που αναπηδούν διαδοχικά, έναν κύκλο που παλλεται προς τα μέσα και έξω, και μια μπάρα με κινούμενο γέμισμα. Προσαρμόστε μέγεθος, χρώμα και διάρκεια κίνησης στη ζωντανή προεπισκόπηση, μετά αντιγράψτε το παραγόμενο CSS και το ελάχιστο στοιχείο HTML στο οποίο εφαρμόζεται.

Πηγή: CSS Animations Level 1, W3C — η προδιαγραφή που ορίζει το @keyframes και τις ιδιότητες κίνησης από τις οποίες χτίζονται αυτά τα loader.

Γιατί να το χρησιμοποιήσετε;

• Η ζωντανή προεπισκόπηση κινείται σε πραγματικό χρόνο καθώς αλλάζετε στυλ, μέγεθος, χρώμα ή ταχύτητα — δείτε ακριβώς τι θα δημοσιεύσετε.
• Παράγει το πλήρες CSS συμπεριλαμβανομένου του μπλοκ @keyframes, όχι απλώς ένα απόσπασμα που πρέπει να ολοκληρώσετε μόνοι σας.
• Παράγει επίσης το ακριβές HTML markup που περιμένει το CSS, ώστε να μη μαντεύετε ονόματα κλάσεων ή δομή στοιχείων.
• Τέσσερα διακριτά μοτίβα κίνησης (spinner, dots, pulse, bar) καλύπτουν τις πιο συνηθισμένες περιπτώσεις κατάστασης φόρτωσης.
• Καθαρή κίνηση CSS — χωρίς JavaScript, χωρίς αρχεία εικόνας, μικρότερη και πιο ομαλή από ένα κινούμενο GIF.
• Εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας, δωρεάν, χωρίς εγγραφή.

Πώς χρησιμοποιείται

1. Επιλέξτε στυλ loader: περιστρεφόμενο δαχτυλίδι, αναπηδώντα τελείες, παλλόμενο κύκλο, ή μπάρα προόδου.
2. Σύρετε τον ολισθητή μεγέθους για να κλιμακώσετε το loader προς τα πάνω ή κάτω.
3. Επιλέξτε χρώμα — αυτό γίνεται το χρώμα έμφασης του loader (το περιστρεφόμενο border, οι τελείες, ή το γέμισμα της μπάρας).
4. Προσαρμόστε την ταχύτητα για γρηγορότερη ή πιο αργή κίνηση· τα περισσότερα loader UI διαβάζονται καλύτερα μεταξύ 0,6s και 1,5s ανά κύκλο.
5. Αντιγράψτε το παραγόμενο CSS στο φύλλο στυλ σας και επικολλήστε το απόσπασμα HTML όπου χρειάζεστε να εμφανιστεί το loader.

Παράδειγμα

Είσοδος

Στυλ: περιστρεφόμενο δαχτυλίδι · Μέγεθος: 40px · Χρώμα: πορτοκαλί · Ταχύτητα: 1,0s

Έξοδος

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Ένα κλασικό spinner δαχτυλιδιού: ένας κύκλος με σχεδόν διαφανές border σε τρεις πλευρές και συμπαγές χρώμα στην τέταρτη, περιστρεφόμενος συνεχώς με γραμμική, ατέρμονη κίνηση.

Γιατί CSS loader αντί για κινούμενα GIF

Τα κινούμενα GIF spinner ήταν η προεπιλογή για χρόνια, αλλά ένα CSS loader είναι σχεδόν πάντα η καλύτερη επιλογή σήμερα: είναι μερικά εκατοντάδες bytes κειμένου αντί για δυαδικό αρχείο εικόνας, κλιμακώνεται σε οποιοδήποτε μέγεθος χωρίς pixelation αφού σχεδιάζεται με border και transform, και το χρώμα του μπορεί να αλλάξει ακαριαία με μία μεταβλητή CSS αντί να επανεξάγετε νέα εικόνα.

Τα τέσσερα στυλ εδώ — spinner, dots, pulse, bar — είναι επίσης αυτά που εμφανίζονται συχνότερα σε πραγματικές διεπαφές, από καταστάσεις φόρτωσης κουμπιών έως επικαλύψεις πλήρους σελίδας. Καθένα χρησιμοποιεί μόνο αλλαγές transform και opacity στα keyframes του, τις οποίες τα προγράμματα περιήγησης μπορούν να κάνουν κίνηση ομαλά στη GPU χωρίς να προκαλούν κόλλημα στην υπόλοιπη σελίδα.

Επιλογή στυλ ανάλογα με την περίσταση

• Περιστρεφόμενο δαχτυλίδι: η πιο ουδέτερη, γενικής χρήσης επιλογή — λειτουργεί καλά μέσα σε κουμπιά και μικρές inline καταστάσεις φόρτωσης.
• Αναπηδώντα τελείες: διαβάζεται ως πιο ελαφρύ και παιχνιδιάρικο· κοινό για ενδείξεις τύπου 'πληκτρολογεί...' σε chat και σύντομες αναμονές.
• Παλλόμενος κύκλος: καλό για μοναδική ένδειξη φόρτωσης ή ως κουκκίδα κατάστασης 'ενεργό/live'.
• Μπάρα προόδου: υπονοεί κίνηση προς τα εμπρός και συχνά αναμένεται για φορτώσεις σελίδας ή διαδικασίες πολλών βημάτων, ακόμα και χωρίς ακριβές ποσοστό.

Χρήση του loader στο έργο σας

Επικολλήστε το παραγόμενο CSS στο φύλλο στυλ σας μία φορά, και μετά επαναχρησιμοποιήστε το απόσπασμα HTML όπου χρειάζεστε κατάσταση φόρτωσης — μέσα σε κουμπί ενώ υποβάλλεται μια φόρμα, πάνω σε κάρτα ενώ φορτώνονται δεδομένα, ή κεντραρισμένο σε επικάλυψη πλήρους σελίδας. Επειδή η κίνηση είναι καθαρό CSS, το ενεργοποίηση/απενεργοποίηση είναι τόσο απλό όσο η προσθήκη ή αφαίρεση του στοιχείου από το DOM, ή η απόκρυψή του με display: none.

→ Δημιουργός Box Shadow · CSS Minifier

Συχνές ερωτήσεις