Home Blogger CSS Tutorial Animasi Loading Dengan CSS Loader

Monday, July 14, 2014

Animasi Loading Dengan CSS Loader

Diterbitkan
Tags

Baca Juga

Animasi Loading Dengan CSS Loader
Animasi Loading Dengan CSS Loader
Animasi Loading Dengan CSS Loader - Anda mungkin pernah bingung bagaimana membuat progress loading untuk website? Tahukah Anda, bahwa banyak sekali penyedia CSS loader yang ternyata sangat mudah digunakan dan cukup menarik. Salah satu Website penyedia CSS Loader adalah CSS Load, pada website ini Anda bisa menemukan loader dalam bentuk text dan mode graphic. Jika Anda tertarik, berikut langkah sederhana untuk menambahkan Loading Animation ke dalam HTML menggunakan kode dari CSS Loader

Anda bisa memulai dengan mengakses Website CSS Loader. Pada website ini anda akan dibebaskan untuk memilih beberapa Animation Loader yang Anda butuhkan.Ketika telah masuk pada website, maka Anda akan melihat beberapa menu. Berikut penjelasan dari menu tersebut
  1. Select your loader: Merupakan tempat pemilihan mode dari loader yang ada. terdapat mode grafik dan mode teks, secara dasar mode yang ditampilkan adalah mode grafik. Untuk mengakses mode text Anda dapat mengakses pada bagian kanan menu.
  2. First color: Merupakan warna dasar dari loader yang telah Anda pilih, dan secara otomatis warna akan dirubah menjadi kode warna hexa sehingga Anda tidak perlu melakukan pengubahan secara manual.
  3. Second color: Merupakan warna kedua bagi loader yang menggunakan 2 warna
  4. Width & height: Ukuran lebar dan luas dari loader yang anda pilih.
  5. Speed: Mengatur kecepatan dari kecepatan loader yang sudah anda pilih.
  6. Reverse animation: Mengubah putaran animasi yang sebelumnya searah jarum jam, menjadi berlawanan dengan arah jarum jam.
  7. get code: Tentu saja mendapatkan code berbentuk css yang bisa anda gunakan pada website anda.
Sedangkan untuk percobaan background, terdapat 4 kotak contoh background pada kotak sebelah kanan. Terdapat pilihan warna hitam, putih, transparan dan bentuk RGB.
Ketika langkah tersebut telah selesai, maka akan muncul pop up kode hasil dari customisasi. Untuk menggunakannya Anda tinggal melakukan copy paste pada kode tersebut. Untuk menggunakannya Anda bisa mulai dengan memisahkan kode tersebut menjadi file HTML dan CSS.
HTML 
<!DOCTYPE html>

 <head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<html>
<body>
<h1>CSS loader generator</h1>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>

 </body>
</html>
CSS
.windows8 {
position: relative;
width: 90px;
height:90px;
}

 .windows8 .wBall {
position: absolute;
width: 25px;
height: 25px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 6.050000000000001s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 6.050000000000001s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 6.050000000000001s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 6.050000000000001s infinite;
transform: rotate(225deg);
animation: orbit 6.050000000000001s infinite;
}

 .windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #00f;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-ms-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px;
}

 .windows8 #wBall_1 {
-moz-animation-delay: 1.32s;
-webkit-animation-delay: 1.32s;
-ms-animation-delay: 1.32s;
-o-animation-delay: 1.32s;
animation-delay: 1.32s;
}

 .windows8 #wBall_2 {
-moz-animation-delay: 0.26s;
-webkit-animation-delay: 0.26s;
-ms-animation-delay: 0.26s;
-o-animation-delay: 0.26s;
animation-delay: 0.26s;
}

 .windows8 #wBall_3 {
-moz-animation-delay: 0.53s;
-webkit-animation-delay: 0.53s;
-ms-animation-delay: 0.53s;
-o-animation-delay: 0.53s;
animation-delay: 0.53s;
}

 .windows8 #wBall_4 {
-moz-animation-delay: 0.79s;
-webkit-animation-delay: 0.79s;
-ms-animation-delay: 0.79s;
-o-animation-delay: 0.79s;
animation-delay: 0.79s;
}

 .windows8 #wBall_5 {
-moz-animation-delay: 1.06s;
-webkit-animation-delay: 1.06s;
-ms-animation-delay: 1.06s;
-o-animation-delay: 1.06s;
animation-delay: 1.06s;
}

 @-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

 7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

 30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

 39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

 70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

 75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

 76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

 100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

 }

 @-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

 7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

 30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

 39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

 70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

 75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

 76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

 100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

 }

 @-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

 7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

 30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

 39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

 70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

 75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

 76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

 100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

 }

 @-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

 7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

 30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

 39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

 70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

 75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

 76% {
opacity: 0;
-o-transform:rotate(900deg);
}

 100% {
opacity: 0;
-o-transform: rotate(900deg);
}

 }

 @keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

 7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

 30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

 39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

 70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

 75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

 76% {
opacity: 0;
transform:rotate(900deg);
}

 100% {
opacity: 0;
transform: rotate(900deg);
}

 }
Maka akan menjadi seperti berikut.

Anda pun dapat melakukan beberapa pengubahan manual jika memang ingin dan tidak ingin melakukan generate kembali.
  • Untuk merubah warna anda dapat melakukan pengubahan pada class .windows8 .wBall .wInnerBall terdapat kode background Anda bisa mengubah sesuai dengan kemauan Anda.
  • Sedang kan, jika ingin mengubah ukuran dari loader anda bisa memulai dengan mengubah width dan height dari class .windows8 .wBall dengan kebutuhan anda.
Bagi yang penasaran bisa melihat demonya dibawah ini.

DEMO

KESIMPULAN
Dan website anda pun akan semakin tampak professional ketika menggunakan loader ini. Mungkin loader yang ada bukan satu satunya yang ada, silahkan berbagi pada link komentar jika anda menggunakan css loader generator yang lainnya.
 

Artikel Terkait

Unknown

Next Post
Previous Post


EmoticonEmoticon

Subscribe to: Post Comments (Atom)