Membuat Preloader Cantik Dengan CSS


Membuat Preloader Cantik Dengan CSS

Assalamualaikum Wr. Wb.
Preloader 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. dikesempatan kali ini saya ingin membahas cara membuat preloader itu sendiri, hanya dengan menggunakan CSS kita dapat membuatnya, yuk langsung aja disimak

1. Audio Wave

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

<div id="preloader_1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

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.

<div id="preloader_2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

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

<div id="preloader_3"></div>
#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.

<div id="preloader_4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

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);}
}

 

5. Spinning Disc

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

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

<div id="preloader6">
           <span></span>
           <span></span>
           <span></span>
           <span></span>
       </div>

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 nggak bosan menunggu untuk memuat halaman konten website kita, silahkan mencoba pre-loader yang kamu suka. semoga bermanfaat!

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/53KYj

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Membuat Preloader Cantik Dengan CSS