Δημιουργός Loaders CSS
Δωρεάν δημιουργός loaders CSS: δέκα spinners φόρτωσης σε καθαρή CSS με ζωντανό έλεγχο μεγέθους, ταχύτητας, πάχους και χρώματος, και έτοιμα HTML και CSS προς αντιγραφή.
Τι δημιουργεί ο δημιουργός loaders CSS;
Χτίζει δείκτες φόρτωσης με κινούμενα σχέδια σε καθαρή CSS: spinner, κουκκίδες, ράβδοι, κυματάκια, παλμός, τροχιά, αναστροφή, κύμα, αναπήδηση και δακτύλιος διαβάθμισης. Κάθε loader δημιουργείται με το μέγεθος, την ταχύτητα, το πάχος και το χρώμα που επιλέγετε, έτοιμο για αντιγραφή ως HTML συν CSS.
Χρειάζονται οι loaders JavaScript ή εικόνες;
Όχι. Κάθε loader αποτελείται από απλά στοιχεία HTML που κινούνται με CSS keyframes. Καμία εικόνα, κανένα γραμματοσειρά εικονιδίων, βιβλιοθήκη ή script εκτέλεσης — το μπλοκ CSS από μόνο του αρκεί.
Πώς προσθέτω loader στη σελίδα μου;
Κάντε κλικ σε έναν loader στο πλέγμα, επικολλήστε το μπλοκ HTML στο σημείο που θα εμφανιστεί και το μπλοκ CSS στο stylesheet σας. Η CSS είναι αυτόνομη και περιλαμβάνει τους απαραίτητους κανόνες @keyframes.
Τι αλλάζουν οι τέσσερις παράμετροι;
Το μέγεθος καθορίζει πλάτος και ύψος όλων των loaders, η ταχύτητα αλλάζει τη διάρκεια του animation, το πάχος επηρεάζει περιγράμματα και πλάτη ράβδων, και το χρώμα repaint όλων των στοιχείων στο πλέγμα και στον κώδικα άμεσα.
Γιατί ο loader που αντέγραψα δεν κινείται;
Η πιο συχνή αιτία είναι η αντιγραφή μόνο των κανόνων κλάσης χωρίς το μπλοκ @keyframes, ή η μετονομασία της κλάσης στο HTML αλλά όχι στην CSS. Αντιγράψτε και τα δύο μπλοκ όπως δημιουργήθηκαν και κρατήστε τα ονόματα κλάσεων.
Είναι αποδοτικά τα animation;
Ναι. Όλοι οι loaders κινούν μόνο transform και opacity — ιδιότητες που ο browser συνθέτει στην GPU χωρίς να προκαλεί layout ή repaint, οπότε παραμένουν ομαλοί ακόμη και με πολλούς loaders σε μια σελίδα.
Είναι προσβάσιμοι οι loaders;
Οι spinners είναι οπτική διακόσμηση· οι screen readers ωφελούνται από μια υπενθύμιση κειμένου. Προσθέστε κρυφή ετικέτα όπως «Φόρτωση» δίπλα στον loader, ή δώστε aria-hidden="true" στον loader και ανακοινώστε την πρόοδο χωριστά.
Στέλνονται δεδομένα σε διακομιστή;
Όχι. Ο δημιουργός λειτουργεί εξ ολοκλήρου στον browser σας. Οι ρυθμίσεις σας δεν αφήνουν ποτέ τη σελίδα και ο παραγόμενος κώδικας συναρμολογείται τοπικά στη συσκευή σας.
Πώς να χρησιμοποιήσετε το Δημιουργός Loaders CSS
Η γεννήτρια CSS Loader χτίζει κινούμενους δείκτες φόρτωσης σε καθαρό CSS — χωρίς εικόνες, χωρίς JavaScript, χωρίς εξαρτήσεις. Επιλέξτε ένα από τα δέκα στυλ, ρυθμίστε μέγεθος, ταχύτητα, πάχος και χρώμα, και αντιγράψτε το παραγόμενο HTML και CSS κατευθείαν στο έργο σας.
- Ρυθμίστε τις καθολικές παραμέτρους με τα τέσσερα στοιχεία ελέγχου: Μέγεθος ορίζει το πλαίσιο κάθε loader, Ταχύτητα αλλάζει τη διάρκεια της κίνησης, Πάχος ελέγχει περιγράμματα και πλάτη ράβδων, και Χρώμα χρωματίζει κάθε στοιχείο.
- Περιηγηθείτε στο πλέγμα: όλοι οι δέκα loaders παραμένουν ζωντανά κινούμενοι με τις τρέχουσες ρυθμίσεις σας ώστε να τους συγκρίνετε με μια ματιά. Κάντε κλικ σε οποιονδήποτε loader για να τον επιλέξετε.
- Ο πίνακας λεπτομερειών εμφανίζει τον επιλεγμένο loader μεγαλύτερο, μαζί με το απόσπασμα HTML και το αντίστοιχο CSS (συμπεριλαμβανομένων των @keyframes που χρειάζεται).
- Πατήστε Αντιγραφή HTML ή Αντιγραφή CSS για να στείλετε κάθε μπλοκ στο πρόχειρο. Το CSS είναι αυτάρκες — επικολλήστε το στο φύλλο στυλ σας και τοποθετήστε το HTML εκεί όπου πρέπει να εμφανιστεί ο loader.
- Αλλάξτε οποιαδήποτε παράμετρο και το πλέγμα, η προεπισκόπηση λεπτομερειών και τα δύο μπλοκ κώδικα ενημερώνονται ακαριαία.
Επειδή είναι καθαρό CSS, οι loaders κοστίζουν σχεδόν μηδενικό εύρος ζώνης και μένουν ευκρινείς σε κάθε οθόνη. Συνδυάστε την κίνηση με ετικέτα κειμένου για προσβασιμότητα και αποφύγετε διάρκειες κάτω από περίπου 0,5 δευτ. — οι δείκτες που αναβοσβήνουν πολύ γρήγορα ανησυχούν περισσότερο παρά καθησυχάζουν.
Σχετικά εργαλεία
- Ελαχιστοποιητής CSS Δωρεάν online ελαχιστοποιητής CSS. Συμπιέστε και βελτιστοποιήστε άμεσα τον κώδικα CSS αφαιρώντας κενά, σχόλια και περιττούς χαρακτήρες. Μειώστε το μέγεθος αρχείου για ταχύτερη απόδοση.
- Κοσμητής CSS Μορφοποιήστε και κοσμήστε τον κώδικα CSS άμεσα. Μετατρέψτε τον ελαχιστοποιημένο CSS σε αναγνώσιμο κώδικα με προσαρμόσιμες επιλογές.
- Γεννήτρια Border Radius Δωρεάν δημιουργική γεννήτρια border-radius online. Σύρετε 8 λαβές ή επιλέξτε ένα έτοιμο blob για να δημιουργήσετε οργανικά σχήματα CSS και να αντιγράψετε τον κώδικα άμεσα.
- Μετατροπέας Χρωμάτων Δωρεάν διαδικτυακός μετατροπέας χρωμάτων. Άμεση μετατροπή μορφών HEX, RGB, HSL, HSV με οπτικό επιλογέα. 100% ιδιωτικό, εκτελείται στο πρόγραμμα περιήγησής σας.
- Γεννήτρια CSS Easing Δωρεάν online γεννήτρια CSS easing. Σύρετε τα σημεία ελέγχου του cubic-bezier σε μια διαδραστική καμπύλη, επιλέξτε από 18 προεπιλογές, δείτε μπάλα σε βρόχο animation και αντιγράψτε τη συνάρτηση χρονισμού άμεσα.
- Γεννήτρια Text Shadow CSS Δωρεάν online γεννήτρια text-shadow CSS. Στοίβαξε πολλές στρώσεις σκιάς με μετατόπιση, θόλωση, χρώμα και αδιαφάνεια, δοκίμασε προεπιλογές Neon, 3D, Retro και αντίγραψε το CSS άμεσα.
- Γεννήτρια CSS Clip Path Δωρεάν online γεννήτρια CSS clip-path. Σχεδιάστε σχήματα polygon, circle, ellipse και inset με σύροντας σημεία, ζωντανή προεπισκόπηση και αντιγραφή κώδικα CSS με ένα κλικ.
- Γεννήτρια Border Radius CSS Οπτική γεννήτρια border-radius CSS. Προσαρμόστε κάθε γωνία ανεξάρτητα με ζωντανή προεπισκόπηση και αντιγράψτε τον κώδικα CSS άμεσα.