preloader cantik dengan css3

8/19/2019 Preloader Cantik Dengan CSS3

http://slidepdf.com/reader/full/preloader-cantik-dengan-css3 1/12



Preloader Cantik dengan CSS3

Oleh: Sendy PK

Pre-loader adalah hal umum yang sering kita temui pada desain web

modern. Sebagai pengunjung kita ingin sebuah situs yang kita kunjungidapat dimuat dengan cepat. Pre-loader menawarkan feedback visual dalam

hal konten yang akan dimuat, sehingga mengurangi kemungkinan

pengunjung meninggalkan situs web kit...

Pre-loader adalah hal umum yang sering kita temui pada desain web modern. Sebagai pengunjung

kita ingin sebuah situs yang kita kunjungi dapat dimuat dengan cepat. Pre-loader menawarkan

feedback visual dalam hal konten yang akan dimuat, sehingga mengurangi kemungkinanpengunjung meninggalkan situs web kita.

Berikut macam-macam preloader cantik yang bisa kita gunakan dalam website

1. Audio Wave

Ide di balik ini pre-loader didapat dari gelombang audio yang sering kita lihat pada music player.

HTML

<div id="preloader_1">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

CSS

Efek ini diperoleh dengan menghidupkan ketinggian masing-masing rentang dari 5px 30px ke. Span

juga bergerak ke bawah pada sumbu Y dengan 15px untuk memberikan efek yang tumbuh dari

tengah.

#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;

}

#preloader_1 span:nth-child(2){

left:11px;

animation-delay: .2s;

}


left:22px;


}


left:33px;


}


left:44px;


}

@keyframes preloader_1 {

0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;}

50% {height:5px;transform:translateY(0px);background:#9b59b6;}

100% {height:5px;transform:translateY(0px);background:#9b59b6;}

}

Secara default animasi pada setiap span terjadi pada waktu yang sama. Efek gelombang Meksiko

dibuat dengan menambahkan animation-delay untuk masing-masing span dengan offset 2 milidetik.

Setiap span ditargetkan menggunakan selector nth-child().

2. Cirqular Square

Pre-loader ini menggunakan empat kotak yang menggeser, memutar, berubah warna dan menjadi

lingkaran.

HTML




<span></span>

<span></span>

<span></span>

<span></span>

</div>

CSS

Semua <span>diubah dari persegi menjadi lingkaran dengan menyesuaikan border-radius dari 0px

(persegi) untuk 20px (lingkaran).

#preloader_2{

position: relative;

left: 50%;

width: 40px;

height: 40px;

}

#preloader_2 span{

display:block;

bottom:0px;

width: 20px;

height: 20px;

background:#9b59b6;

position:absolute;

}

#preloader_2 span:nth-child(1){animation: preloader_2_1 1.5s infinite ease-in-out;

}


left:20px;

animation: preloader_2_2 1.5s infinite ease-in-out;

}


top:0px;

animation: preloader_2_3 1.5s infinite ease-in-out;}


top:0px;

left:20px;

animation: preloader_2_4 1.5s infinite ease-in-out;

}

@-keyframes preloader_2_1 {

0% {-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;} 50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg);

border-radius:20px;background:#3498db;}

80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);



border-radius:0px;}


border-radius:0px;}

}


0% {-transform: translateX(0px) translateY(0px)

rotate(0deg);border-radius:0px;}

50% {-transform: translateX(20px) translateY(-10px)

rotate(180deg);border-radius:20px;background:#f1c40f;}





}




50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg);

border-radius:20px;background:#2ecc71;}


rotate(-360deg);border-radius:0px;}


border-radius:0px;}

}


0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}


border-radius:20px;background:#e74c3c;}


border-radius:0px;}



}

3. Crossing Shapes

HTML

<div id="preloader_3"></div>



CSS

#preloader_3{

position:relative;

}

#preloader_3:before{

width:20px;

height:20px;

border-radius:20px;

background:blue;

content:'';

position:absolute;

background:#9b59b6;

animation: preloader_3_before 1.5s infinite ease-in-out;

}

#preloader_3:after{

width:20px;

height:20px;

border-radius:20px;

background:blue;

content:'';

position:absolute;

background:#2ecc71;

left:22px;

animation: preloader_3_after 1.5s infinite ease-in-out;

}

@keyframes preloader_3_before {

0% {transform: translateX(0px) rotate(0deg)}

50% {transform: translateX(50px) scale(1.2) rotate(260deg);

background:#2ecc71;border-radius:0px;}

100% {transform: translateX(0px) rotate(0deg)}

}

@keyframes preloader_3_after {

0% {transform: translateX(0px)}

50% {transform: translateX(-50px) scale(1.2)

rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {transform: translateX(0px)}

}

Salah satu animasi ditempatkan pada #preloader_3: before dan satu lagi pada # preloader_3: after.

Setiap animasi berubah menjadi warna yang berbeda pada saat yang berlawanan. Demikian pula

dengan pre-loader sebelumnya setiap perubahan elemen dari lingkaran ke persegi dengan

menganimasikan properti border-radius.



4. The Snake

Pre-loader ini terdiri dari kumpulan span masing-masing form yang ditata membentuk lingkaran.

HTML


<span></span>

<span></span>

<span></span>

<span></span>

<span></span> </div>

CSS

Animasi dibuat dengan mengubah posisi Y dari setiap animasi oleh -10px dan berubah warna dari

biru menjadi kuning. Untuk menciptakan efek bayangan yang mendasari drop shadow ditambahkan

ke masing-masing span yang mengubah ukuran bayangan vertikal dari 0px ke 20px.

#preloader_4{ position:relative;

}

#preloader_4 span{

position:absolute;

width:20px;

height:20px;

background:#3498db;

opacity:0.5;

border-radius:20px;

-animation: preloader_4 1s infinite ease-in-out;

}


left:20px;


}


left:40px;


}


left:60px;




}


left:80px;


}


0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px

3px rgba(0, 0, 0, 0.1);}

50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;

box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px

3px rgba(0, 0, 0, 0.1);}

}

Demikian pula untuk pre-loader 1, dengan menambahkan animasi-delay untuk setiap span dan

mengimbangi delay setiap rentang oleh 2 milidetik maka akan menciptakan efek gelombang.

5. Spinning Disc

HTML

<div id="preloader5"></div>

CSS

Tambahkan border ke atas dan bawah dan memberikan border-radius 50px membuat dua

outer-lines. Animasi ditambahkan ke div utama, untuk mengubah warna div utama dan menciptakan

efek rotasi dengan menambahkan transform: rotate(). The:after kena elemen animasi ditambahkan

untuk mengubah warna outer-border.

#preloader5{

position:relative;

width:30px;

height:30px;

background:#3498db;

border-radius:50px;

animation: preloader_5 1.5s infinite linear;

}

#preloader5:after{ position:absolute;

width:50px;

height:50px;



border-top:10px solid #9b59b6;

border-bottom:10px solid #9b59b6;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-radius:50px;

content:'';

top:-20px;

left:-20px;

animation: preloader_5_after 1.5s infinite linear;

}


0% {transform: rotate(0deg);}

50% {transform: rotate(180deg);background:#2ecc71;}

100% {transform: rotate(360deg);}

}

@keyframes preloader_5_after {

0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}

100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

}

6. Glistening Window

HTML

<div id="preloader6">

<span></span>

<span></span>

<span></span> <span></span>

</div>

CSS

Kotak diposisikan dalam grid-like. Animasi ditambahkan ke div utama untuk merotasikan seluruh

pre-loader. Animasi lain ditambahkan ke span yang skalanya dari 100% menjadi 50%. Lalu

tambahkan animasi-delay ke setiap span untuk menciptakan efek berdenyut.

#preloader6{ position:relative;

width: 42px;



height: 42px;

animation: preloader_6 5s infinite linear;

}

#preloader6 span{

width:20px;

height:20px;

position:absolute;

background:red;

display:block;

animation: preloader_6_span 1s infinite linear;

}

#preloader6 span:nth-child(1){

background:#2ecc71;

}


left:22px;

background:#9b59b6;


}


top:22px;

background:#3498db;


}


top:22px;left:22px;

background:#f1c40f;


}

@keyframes preloader_6_span {

0% { transform:scale(1); }

50% { transform:scale(0.5); }

100% { transform:scale(1); }

}

Itulah tadi macam-macam pre-loader cantik yang bisa dipakai untuk website, agar pengunjung tidak

bosan menunggu untuk memuat halaman konten website kita, silahkan mencoba pre-loader yang

anda suka.

Tentang Penulis



Sendy PK

Saya adalah Programmer yang memiliki impian untuk menguasai dunia



kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di

www.spkshop.web.id

preloader cantik dengan css3

Documents