Sayfalarımızda “yükleniyor” mesajı vermek için çoğu kez animasyonlu gif resimler kullanıyoruz. Loader adlandırdığımız bu resimleri aslında CSS3 ve HTML kullanarak kolayca yapmamız mümkün. Yazımda paylaşacağım kodları kullanarak siz de artık loaderlarınızı CSS ve html ile yapabilirsiniz.
1. Adım
Öncelikle body etiketleri arasına aşağıdaki kodları yapıştıralım.
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
2. Adım
sayfamızın üst kısmında head etiketleri arasına style kodlarımızı ekleyelim. İsterseniz bu kodları harici css dosyası oluşturarak da kullanabilirsiniz.
<style type="text/css">
body {
margin:20px;
}
#preloader_1 {
position:relative;
}
#preloader_1 span {
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#9b59b6;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
-webkit-animation: preloader_1 1.5s infinite ease-in-out;
-moz-animation: preloader_1 1.5s infinite ease-in-out;
-ms-animation: preloader_1 1.5s infinite ease-in-out;
-o-animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2) {
left:11px;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
-o-animation-delay: .2s;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3) {
left:22px;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
-o-animation-delay: .4s;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4) {
left:33px;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5) {
left:44px;
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
-ms-animation-delay: .8s;
-o-animation-delay: .8s;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
25% {
height:30px;
transform:translateY(15px);
-webkit-transform:translateY(15px);
background:#3498db;
}
50% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
100% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
}
@-webkit-keyframes preloader_1 {
0% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
25% {
height:30px;
transform:translateY(15px);
-webkit-transform:translateY(15px);
background:#3498db;
}
50% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
100% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
}
@-o-keyframes preloader_1 {
0% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
25% {
height:30px;
transform:translateY(15px);
-webkit-transform:translateY(15px);
background:#3498db;
}
50% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
100% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
}
@-moz-keyframes preloader_1 {
0% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
25% {
height:30px;
transform:translateY(15px);
-webkit-transform:translateY(15px);
background:#3498db;
}
50% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
100% {
height:5px;
transform:translateY(0px);
-webkit-transform:translateY(0px);
background:#9b59b6;
}
}
</style>
işte bu kadar basit. Örnek uygulamayı buradan görüntüleyebilirsiniz.
Aslında bu paylaşımlar benim için de not niteliğinde. Lazım oldukca buradan kullanırım ben de 🙂
iyi çalışmalar dilerim herekese 🙂 Faydalı olduysa arkadaşlarınızla paylaşabilirsiniz 🙂
Yanıtla
Mehmet
Çok Teşekkürler Yararlı Bir Paylaşım
18.01.2015, 23:21:25Yanıtla
Anar SAMADOV
Teşekkürler. faydalı olduysa ne mutlu bana.
18.01.2015, 23:29:02Yanıtla
resid
tesekkurler..
21.05.2015, 0:54:54Yanıtla
premium hesaplar
İşte aradığım kodlar. Çok teşekkürler.
26.05.2015, 23:53:56Yanıtla
Ilqar
Təşəkkürlər paylaşım üçün.
01.07.2015, 17:47:23