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...

Preloader Cantik dengan CSS3

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.


About Author

Sendy PK

Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id


Comment & Discussions

    Please LOGIN before if you want to give the comment.