Bu yazımızda Css ile nasıl loading animasyonu yapabiliriz onu öğreneceğiz. Bildiğiniz gibi bir sayfa yüklenirken veya bir işlemin gerçekleşmesini beklerken genelde loading animasyonları ile karşılaşırız. İşlem gerçekleştiğinde ise animasyon kaybolur.
Yaptığımız aslında bir div etiketi oluşturup animasyon olarak transform:rotate() değerini 0 deg’den 360 deg’e çıkarmak. Böylece oluşturduğumuz div sürekli olarak dönmüş olacak.
Örneğimizi incelediğinizde daha iyi anlaşılacaktır.
Css kodlarında özellikle border ve color değerlerinde değişiklikler yaparak daha farklı loading animasyonları geliştirebilirsiniz.
Css ile Loading Yapımı
Loading Html Kodları
|
1 2 3 4 5 6 |
<div class="loading-1"></div> <div class="loading-2"></div> <div class="loading-3"></div> <div class="loading-4"></div> |
Loading Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.loading-1 { border: 6px solid #bbb; border-radius: 50%; border-top: 6px solid #E7512F; width: 40px; height: 40px; margin: 30px; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .loading-2 { border: 6px solid #bbb; border-top: 6px solid #E7512F; width: 40px; height: 40px; margin: 30px; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .loading-3 { border: 6px solid #bbb; border-radius: 50%; border-top: 6px solid #E7512F; border-bottom: 6px solid #E7512F; width: 40px; height: 40px; margin: 30px; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .loading-4 { border: 6px solid #bbb; border-top: 6px solid #E7512F; border-bottom: 6px solid #E7512F; width: 40px; height: 40px; margin: 30px; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-moz-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
Loading Son Hali
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Loading Gif Örnekleri – Yükleniyor Gif Örnekleri
Html ve Css ile Pagination (Sayfalama Butonları) Yapımı
Html ve Css ile Animasyonlu Arama Kutusu Yapımı
Yeni bir yazımda görüşmek üzere.
