Muka menggunakan preloader javascript

Hello world, masih semangat ngoding gak nih? . menuut kalian gimana nih? . Jadi semangat ngoding lagi kan? . Baiklah kalo udah pada semangat semua mari kita langsung aja buat

Table of Contents Show

pemuat. html
pemuat. html
pemuat. html
pemuat. html
pemuat. html
Bagaimana menghadapi penggunaan JavaScript dalam HTML?
Bagaimana membuat komentar di JavaScript?

Sebenarnya cukup mudah dan cepet kok membuat preloader atau loading yang akan hilang ketika data sudah selesai di load kok. Tidak perlu menggunakan bahasa pemrograman seperti php. Kita hanya perlu mengunkan javascript untuk proses load nya dan sedikit css yang kalian nanti bisa customisasi sendiri tampilanya seperti apa. Kalo dari admin nanti mungkin hanya loader sederhana saja ya. kalian bisa kembangkan sendiri. Baik langsung aja buka text editor kalian dan buat satu file dengan format html saja terserah kalian. Untuk kalian yang binggung bisa kasih nama file nya loader. html

Langkah Pertama, Kita akan membuat struktur dasar html seperti biasa terdiri dari head,title,body dan kita akan menaruh script css nya ke dalam tag < /a> mengunakan tag baik kita langsung aja buat script struktur html dasar nya seperti di bawah ini

pemuat. html

<. DOCTYPE html>

Dokumen

Langkah Kedua, Jika sudah selesai kita membuat struktur dasar dari html maka langkah kedua adalah menambahkan sebuah div dengan kita beri sebuah id loader. Dan kita langsung saja kasih css nya di dalam tag jadi ibaratnya html ini adalah tulangnya atau bagian dalamnya. Dan css nya nanti adalah tampilan luarnya dan javascript nanti adalah otak yang bisa membuat kita bekerja haha. Untuk lebih jelasnya bisa di lihat script di bawah ini.

pemuat. html

<. DOCTYPE html>

Dokumen

#memuat {
lebar. 50px;
tinggi. 50px;
radius perbatasan. 100%;
berbatasan. 5px padat #ccc;
border-top-color. #ff6a00;
posisi. tetap;
atas. 0;
kiri. 0;
Kanan. 0;
dasar. 0;
batas. mobil;
z-index. 99;
animasi. putar 2s kemudahan tak terbatas;
}

Setelah script yang kalian buat sama seperti script di atas maka akan muncul tampilan loader bundaran yang berada di tengah-tengah halaman web. Loadernya seperti di aplikasi-aplikasi android gitu deh. Iya kan?

Langkah Ketiga, gimana, lumayan keren lah ya haha. Etss tapi langkah kita selanjutnya masih belum selesai nih kita masih harus membuat script animasi yang sudah di sediakan oleh CSS3 yaitu keyframes. keyframes sendiri di gunakan untuk membuat sebuah animasi. Nah kali ini kita akan memakai function keyframes tersebut ke dalam script kita. Dan cara pakainya seperti di bawah ini nih, kalian bisa sesuaikan aja ya

pemuat. html

<. DOCTYPE html>

Dokumen

#memuat {

lebar. 50px;

tinggi. 50px;

radius perbatasan. 100%;

berbatasan. 5px padat #ccc;

border-top-color. #ff6a00;

posisi. tetap;

atas. 0;

kiri. 0;

Kanan. 0;

dasar. 0;

batas. mobil;

z-index. 99;

animasi. putar 2s kemudahan tak terbatas;

}

@keyframes menempatkan {

dari {

mengubah. putar (0 derajat);

} ke {

mengubah. putar (360 derajat);

}

Kali ini kita akan membuat keyframe dengan nama putar. Dan jadi dia nanti akan memberika sebuah animasi putar kaya loader-loader di web-web atau aplikasi gitu. Kalian bisa cek sendiri-sendiri script yang sudah kalian buat. Pasti udah berhasil deh tuh, gimana keren ya?

Langkah ketiga, sebernarnya sih ini sudah di bilang sebagai loader sih tapi kali ini kita akan membuat animasi loadernya selesai setelah data atau isi halaman web selesai di load. Maka animasi putar yang sudah kita buat ini juga akan berhenti juga. Jadi langkah ke tiga ini adalah membuat script javascriptnya kalian bisa sama scriptnya seperti di bawah ini

pemuat. html

var memuat = dokumen. getElementById("memuat");

jendela. addEventListener('load', function(){

memuat. gaya. tampilan="tidak ada";

});

Kemudian taruh script kode tersebut di atas tag jadi alur pembuatan kode javascript ini adalah pertama kita mendeklasarikan sebuah variabel bernama load. Dan di dalam variable load tersebut adalah sebuah id loading yang ada di dalam tag . Yang telah di ambil oleh javascript dengan menggunakan function document. getElementById. . Yang telah di ambil oleh javascript dengan menggunakan function document. getElementById.

Setelah itu kita akan menghapus display dari id loading menjadi none atau tidak ada ketika window atau halaman web selesai di load dengan menambahkan sebuah eventListener. Jadi itulah alur dalam membuat kode javascript di atas. Nanti setelah ini kalian bisa cek hasilnya sendiri-sendiri.

Pasti masih belum muncul apa-apa kan ya? . Jadi biar kita bisa melihat loader nya kita coba embed sebuah video gimana? .

Kalian boleh play kok embed video dari channel youtube admin. Bantu like dan subscribe juga alhamdulilah, hehe. jadi kita langsung aja buka webnya youtube. com dan cari channel bermana Raihan Raihan seperti gambar di bawah ini ya

Kemudian kalia bisa pilih salah satu videonya. Kali ini admin akan memilih video Demo animasi javascript dom. Setelah itu kalian kilik tombol shere dan setelah itu piliih embed dan copy scriptnya, taruh di atas tag Atau lebih jelasnya kalian juga bisa lihat gambar di bawah ini supaya lebih jelas.

Dan untuk akhir script dari file loader. html bisa kalian lihat di bawah ini dan kalian juga bisa samakan dengan punya kalian. Dan setelah itu kalian juga bisa langsung cek hasilnya

pemuat. html

<. DOCTYPE html>

Dokumen

#memuat {

lebar. 50px;

tinggi. 50px;

radius perbatasan. 100%;

berbatasan. 5px padat #ccc;

border-top-color. #ff6a00;

posisi. tetap;

atas. 0;

kiri. 0;

Kanan. 0;

dasar. 0;

batas. mobil;

z-index. 99;

animasi. putar 2s kemudahan tak terbatas;

}

@keyframes menempatkan {

dari {

mengubah. putar (0 derajat);

} ke {

mengubah. putar (360 derajat);

}

var memuat = dokumen. getElementById("memuat");

jendela. addEventListener('load', function(){

memuat. gaya. tampilan="tidak ada";

});

Jika hasil file yang kalian telah cek tadi seperti gambar di bawah ini maka kalian telah sukses membuat sebuah pre loader deh. Gimana perasaan bisa membuat preloader sendiri. Dengan usaha sendiri dari A sampai Z walaupun masih ada kendala gakpapa lah wajar karena sukses takan tercapai tanpa ada perjuangan. wuihh admin kata kata nya keren juga ya haha

Baiklah mungkin sekian dulu tutorial kali ini. Semoga ilmu yang admin bagikan ini bisa bermanfaat bagi kalian dan bisa membantu kalian juga. Dan admin akan kasih bocoran lagi nih tentang artikel yang akan admin buat selanjutnya adalah membuat sebuah aplikasi chat berbasis web dengan mengunakan html,css,javascript, php dan mysql

Jadi jangan lupa untuk nyalakan pemberitahuan di blog ini ya dengan mengklik tombol warna pink di bagian bawah pojok kanan atau bisa juga follow blog ini ya. dan untuk source code nya kalian bisa download di sini. Baiklah sekian dulu dari admin semoga bermanfaat. akhir kata wasalam

Bagaimana menghadapi penggunaan JavaScript dalam HTML?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag yang mencakup semua kode JS yang Anda tulis yang mencakup semua kode JS yang Anda tulis . Kode JS yang dapat ditambahkan. di antara tag

Bagaimana membuat komentar di JavaScript?

Comment multi baris diawali dengan /* (garis miring bintang) dan diakhiri dengan */ (bintang garis miring) . Kode atau teks apa pun yang berada diantara /* dan */ tidak akan dieksekusi oleh mesin.