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 kunjungi
dapat 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 kemungkinan
pengunjung 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;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@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

<div id="preloader_2">
<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;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
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;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;}
}
@-keyframes preloader_2_2 {
0% {-transform: translateX(0px) translateY(0px)
rotate(0deg);border-radius:0px;}
50% {-transform: translateX(20px) translateY(-10px)
rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-transform: translateX(0px) translateY(0px)
rotate(360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px)
rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
0% {-transform: translateX(0px) translateY(0px)
rotate(0deg);border-radius:0px;}
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius:20px;background:#2ecc71;}
80% {-transform: translateX(0px) translateY(0px)
rotate(-360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;}
}

@-keyframes preloader_2_4 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;}
50% {-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius:20px;background:#e74c3c;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px)
rotate(360deg);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
<div id="preloader_4">
<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;
}
#preloader_4 span:nth-child(2){
left:20px;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
animation-delay: .6s;

}
#preloader_4 span:nth-child(5){
left:80px;
animation-delay: .8s;
}
@keyframes preloader_4 {
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;
}
@keyframes preloader_5 {
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;
}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
animation-delay: .2s;
}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
animation-delay: .6s;
}
@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