Πώς να δημιουργήσετε: CSS φορτιστής

Μάθετε πώς να δημιουργήσετε προφορικούς φορτιστές χρησιμοποιώντας CSS.

Δοκιμάστε το προσωπικά

Πώς να δημιουργήσετε φορτιστή

Βήμα 1 - Προσθήκη HTML:

<div class="loader"></div>

Βήμα 2 - Προσθήκη CSS:

.loader {
  border: 16px solid #f3f3f3; /* Ευκάλυπτος */
  border-top: 16px solid #3498db; /* Μπλε */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Δοκιμάστε το προσωπικά

Παράδειγμα ερμηνείας:

border ιδιότητα καθορίζει το μέγεθος και το χρώμα του περιβόλου του φορτιστή.border-radius τροποποιεί τον φορτιστή σε κύκλιο.

το μπλε μέρος που γυρίζει μέσα στο περίβολο της κύριας περιοχής καθορίζεται από την ιδιότητα border-top ιδιότητες καθορίζουν. Αν θέλετε περισσότερους "διατρήτες", μπορείτε επίσης να περιλαμβάνετε border-bottom,border-left ή border-right(βλέπε παρακάτω παράδειγμα).

Ο μέγεθος του φορτιστή καθορίζεται από width και height ιδιότητες.

Τελευταία, προσθέσαμε μια αнимάτιση που κάνει το μπλε μέρος να γυρίζει ατελείωτα με ταχύτητα 2 δευτερόλεπτα.

Σημείωση:για αυτούς που δεν υποστηρίζουν animation και transform του προγράμματος περιήγησης, θα πρέπει επίσης να περιλαμβάνετε έναν -webkit- πρόθεμα. Πατήστε στην παράδειγμα για να δείτε πώς λειτουργεί.

προσθέστε περισσότερους διατρήτες

Παράδειγμα

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Δοκιμάστε το προσωπικά

Παράδειγμα

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Δοκιμάστε το προσωπικά

Παράδειγμα

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Δοκιμάστε το προσωπικά

Ένας άλλος παράδειγμα

Πώς να τοποθετήσετε το φορτίο στο κέντρο της σελίδας και να εμφανίσετε το "Περιεχόμενο σελίδας" όταν ο φόρτος ολοκληρωθεί:

Παράδειγμα

Δοκιμάστε το προσωπικά