Φτιάξτε ένα Loader με css (χωρίς εικόνα)

Θα έχετε προσέξει τον loader που χρησιμοποιούμε στο iGuRu.gr (εμφανίζεται όταν κάνετε κλικ στο /load more). Ο συγκεκριμένος loader είναι ένα αρχείο .gif, ανεβασμένο στον server μας.

Ας δούμε όμως πως μπορούμε να φτιάξουμε ένα loader με 10 γραμμές κώδικα χωρίς να χρησιμοποιήσουμε κάποια εικόνα.
Δημιουργήστε ένα html αρχείο και γράψτε:

 
Φυσικά μπορείτε να τροποποιήσετε τις παραμέτρους και να δημιουργήσετε το δικό σας σχέδιο.

iGuRu.gr Φτιάξτε ένα Loader με css
Το Animation που βλέπετε παρακάτω δεν είναι εικόνα, αλλά κώδικας css.

 

Ας δούμε το αποτέλεσμα:

iGuRu.gr Φτιάξτε ένα Loader με css

Το Animation που βλέπετε παρακάτω δεν είναι εικόνα, αλλά κώδικας css.