İçerikler
Web sitelerinize ekleyeceğiniz yükleme animasyonları, geliştirdiğiniz projeler için oldukça kullanışlı bir unsurdur. Sayfa veya içerik yükleme sırasında yükleme animasyonu kullanarak kullanıcılara sayfanın hazırlığı için bilgi verebilirsiniz. Web sayfasının içeriğini getirmek yada işlemler yaptıldığında sonucun dönmesi için beklemek adına yükleme animasyonları kullanılmaktadır. Yükleyiciler, kullanıcıların sayfada beklemesini sağlamak ve işlemin tamamlamasını beklemesi için verilen hoş bir kullanımdır.
Yükleme animasyonunu CSS kodları ile gerçekleştireceğiz. HTML ve CSS kodlarını kullanarak basit bir yükleme animasyonunun nasıl hazırlandığını inceleyeceğiz.
Yuvarlak Yükleme Animasyonu
Bu bölümde, yuvarlak bir yükleyici animasyonu hazırlayacağız. Yuvarlak daire saat yönünde dönerek kullanıcılara işlem yapıldığını belirtecektir.
CSS Kodları
İlk olarak CSS kodlarını hazırlayalım. Bu kodlarda keyframes kullanarak hazırlanan yuvarlak daireyi hareketlendirmiş olacağız.
.loader {
border-top: 16px solid #4285F4;
border-right: 16px solid #EA4335;
border-bottom: 16px solid #FBBC05;
border-left: 16px solid #34A853;
border-radius: 50%;
width: 120px;
height: 120px;
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
Hazırlanan daireyi hareketlendirmek için keyframes ile hareketlendirmiş oluyoruz. Hareketlendirme işlemini de animasyon tanımlaması ile kullanıyoruz.
HTML Kodları
Hazırlamış olduğumuz CSS kodlarının geçerli olması için loader değerine sahip bir HTML etiketi oluşturuyoruz.
<div class="loader"></div>
Böylelikle daire bir yükleme animasyonu hazırlamış oluyoruz. Kodlarda değişiklikler yaparak renk ve boyutları kendinize göre ayarlayabilirsiniz.
Dikey Yükleme Animasyonu
Bu bölümde de, dikey bir yükleme animasyonu hazırlayacağız. Dikey yükleme işlemi ses barı gibi bir görünüme sahip olacaktır.
CSS Kodları
İlk olarak CSS kodlarını hazırlayalım. Bu kodlarda keyframes kullanarak hazırlanan yuvarlak daireyi hareketlendirmiş olacağız.
.loader, .loader:before, .loader:after {
background: #000000;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #000000;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before, .loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes animate {
0%, 80%, 100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes animate {
0%, 80%, 100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
Hazırlanan daireyi hareketlendirmek için keyframes ile hareketlendirmiş oluyoruz. Hareketlendirme işlemini de animasyon tanımlaması ile kullanıyoruz.
HTML Kodları
Hazırlamış olduğumuz CSS kodlarının geçerli olması için loader değerine sahip bir HTML etiketi oluşturuyoruz.
<div class="loader"></div>
Böylelikle daire bir yükleme animasyonu hazırlamış oluyoruz. Kodlarda değişiklikler yaparak renk ve boyutları kendinize göre ayarlayabilirsiniz.
