news

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

giorgos 1 λεπτό ανάγνωσης
Προσθέστε το iGuRu.gr στη Google

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

loader

Προτιμώμενη πηγή στο Google

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

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

HTML
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
 border-top: 1px solid black;
border-radius: 90%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(100deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

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

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

</body>
</html>

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



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

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


Προτιμώμενη πηγή στο Google
Προσθέστε το iGuRu.gr στη Google

0 σχόλια

iGuRu.gr

Συμμετέχετε στη συζήτηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Το μήνυμα σας δεν θα δημοσιευτεί εάν:

  1. Περιέχει υβριστικά, συκοφαντικά, ρατσιστικά, προσβλητικά ή ανάρμοστα σχόλια.
  2. Προκαλεί βλάβη σε ανηλίκους.
  3. Παρενοχλεί την ιδιωτική ζωή και τα ατομικά και κοινωνικά δικαιώματα άλλων χρηστών.
  4. Διαφημίζει προϊόντα ή υπηρεσίες ή διαδικτυακούς τόπους.
  5. Περιέχει προσωπικές πληροφορίες (διεύθυνση, τηλέφωνο κλπ).