asdar.id menyediakan Member Premium Download untuk download file tanpa embel-embel iklan dan halaman, apa lagi harus menunggu timer yang begitu lama. Dengan berlangganan Member Premium Download, semua file dapat didownload dengan singkat langsung menuju ke sumbernya!, klik DISINI untuk DAFTAR atau DISINI untuk LOGIN :-) Jika ada pertanyaan silahkan hubungi Admin DISINI. Untuk cara download file Member Free Download, bisa membaca Tutorial Download yang ada dibawah Timer (halaman Safelink) saat menekan tombol download.
Rekomendasi aplikasi hitung cepat RAB akurat dan otomatis, sangat mudah digunakan. Tinggal ganti dimensi, RAB Langsung Jadi. Dilengkapi acuan AHSP dan HSPK seluruh Indonesia, rugi jika tidak punya filenya. Klik DISINI untuk mendapatkan Filenya.
Sekarang bukan zamannya lagi susah hitung RAB, tak perlu keluar biaya mahal-mahal buat nyewa orang. Dengan EasyRAB, menghitung RAB menjadi lebih cepat dan serba otomatis. Klik DISINI untuk mendapatkan Filenya.
Dapatkan ratusan file-file desain gambar rumah siap pakai untuk menunjang dan mempermudah proyek anda. Dengan 250+ Desain Rumah Kekinian, Anda bisa dengan mudah memenuhi permintaan klien dengan desain rumah berkualitas tinggi ini. Klik DISINI untuk mendapatkan semua Filenya.
Kalian tentu sudah mengenal dengan bahasa pemrograman HTML dan CSS, apa lagi bagi anda yang sudah pernah membuat website tentunya sudah mahir menguasai bahasa pemrograman tersebut.
Baca Juga:
Pada pembahasan kali ini saya akan sedikit membahas tentang bagaimana cara membuat animasi sebuah loading page windows 8 menggunakan bahasa pemrograman HTML dan CSS tanpa harus melibatkan javascript, jqueri dan lain sebagainya.
Sebelum membuat sebuah animasi loading page maka hal pertama yang perlu dilakukan adalah harus menyiapkan alat tempur terlebih dahulu supaya dalam membuat animasi loading page windows 8 ini bisa lebih mudah. Alat tempur yang dimaksud disini adalah kode editor bisa Notepad++, Sublime Text, atau CSS editor semacamnya, terserah anda mau gunakan yang mana.
Untuk bisa mendapat kodenya anda bisa memulainya dengan mengakses Website CSS Loader. Pada website ini anda akan dibebaskan untuk memilih beberapa Animation Loader yang Anda butuhkan. Ketika sudah masuk halaman website, maka anda akan melihat beberapa menu. Berikut penjelasan dari menu tersebut:
- 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.
- 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.
- Second color: Merupakan warna kedua bagi loader yang menggunakan 2 warna
- Width & height: Ukuran lebar dan luas dari loader yang anda pilih.
- Speed: Mengatur kecepatan dari kecepatan loader yang sudah anda pilih.
- Reverse animation: Mengubah putaran animasi yang sebelumnya searah jarum jam, menjadi berlawanan dengan arah jarum jam.
- 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. Ada pilihan warna hitam, putih, transparan dan bentuk RGB.
loading...
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. Sebagai contoh berikut kode untuk membuat loading page Windows 8:
Membuat Loader Seperti Windows 8 dengan CSS
HTML Code:
<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>
CSS Code:
.windows8 {
position: relative;
width: 78px;
height:78px;
margin:auto;
}
.windows8 .wBall {
position: absolute;
width: 74px;
height: 74px;
opacity: 0;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
animation: orbit 6.96s infinite;
-o-animation: orbit 6.96s infinite;
-ms-animation: orbit 6.96s infinite;
-webkit-animation: orbit 6.96s infinite;
-moz-animation: orbit 6.96s infinite;
}
.windows8 .wBall .wInnerBall{
position: absolute;
width: 10px;
height: 10px;
background: rgb(0,0,0);
left:0px;
top:0px;
border-radius: 10px;
}
.windows8 #wBall_1 {
animation-delay: 1.52s;
-o-animation-delay: 1.52s;
-ms-animation-delay: 1.52s;
-webkit-animation-delay: 1.52s;
-moz-animation-delay: 1.52s;
}
.windows8 #wBall_2 {
animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.windows8 #wBall_3 {
animation-delay: 0.61s;
-o-animation-delay: 0.61s;
-ms-animation-delay: 0.61s;
-webkit-animation-delay: 0.61s;
-moz-animation-delay: 0.61s;
}
.windows8 #wBall_4 {
animation-delay: 0.91s;
-o-animation-delay: 0.91s;
-ms-animation-delay: 0.91s;
-webkit-animation-delay: 0.91s;
-moz-animation-delay: 0.91s;
}
.windows8 #wBall_5 {
animation-delay: 1.22s;
-o-animation-delay: 1.22s;
-ms-animation-delay: 1.22s;
-webkit-animation-delay: 1.22s;
-moz-animation-delay: 1.22s;
}
@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);
}
}
@-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);
}
}
@-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);
}
}
@-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);
}
}
@-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);
}
}
Anda pun dapat melakukan beberapa perubahan manual jika anda menginginkannya 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.
- Sedangkan, jika ingin mengubah ukuran dari loader anda bisa memulai dengan mengubah width dan height dari class .windows8 .wBall sesuai dengan kebutuhan anda.
Hasilnya website anda pun akan semakin tampak professional dan berkelas ketika menggunakan loading page ini. Mungkin loading page ini bukan satu satunya yang ada, tetapi bisa berguna untuk website anda.
Sekian postingan kali ini, semoga tutorial ini bermanfaat. Jika artikel ini bermanfaat, jangan lupa bagikan ke yang lain. Sekian dan terimakasih.
