Pre-loader yaitu hal umum yang sering kita temui pada desain web modern. Sebagai pengunjung kita ingin sebuah situs yang kita kunjungi sanggup dimuat dengan cepat.  Pre-loader mengatakan feedback visual dalam hal konten yang akan dimuat, sehingga mengurangi kemungkinan pengunjung meninggalkan situs web kita.

Berikut macam-macam preloader anggun yang sanggup kita gunakan dalam website

1. Audio Wave

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

Preloader Bagus Dengan Css3

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 mengatakan pengaruh 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 dibentuk dengan menambahkan animation-delay untuk masing-masing span dengan offset 2 milidetik. Setiap span ditargetkan memakai selector nth-child().

 

2. Cirqular Square

Pre-loader ini memakai empat kotak yang menggeser, memutar, berubah warna dan menjadi lingkaran.

Preloader Bagus Dengan Css3  Preloader Bagus Dengan Css3

HTML

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

CSS

Semua <span>diubah dari persegi menjadi bulat 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

Preloader Bagus Dengan Css3  Preloader Bagus Dengan Css3

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 berkembang menjadi warna yang berbeda pada dikala yang berlawanan. Demikian pula dengan pre-loader sebelumnya setiap perubahan elemen dari bulat ke persegi dengan menganimasikan properti border-radius.

 

4. The Snake

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

Preloader Bagus Dengan Css3

HTML

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

CSS

Animasi dibentuk dengan mengubah posisi Y dari setiap animasi oleh -10px dan berubah warna dari biru menjadi kuning. Untuk membuat pengaruh 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 membuat pengaruh gelombang.

 

5. Spinning Disc

Preloader Bagus Dengan Css3

HTML

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

Tambahkan border ke atas dan bawah dan mengatakan border-radius 50px membuat  dua outer-lines. Animasi ditambahkan ke div utama, untuk mengubah warna div utama dan membuat pengaruh 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

Preloader Bagus Dengan Css3

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 membuat pengaruh 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 anggun yang sanggup digunakan untuk website, biar pengunjung tidak bosan menunggu untuk memuat halaman konten website kita, silahkan mencoba pre-loader yang anda suka.