• Beranda
  • Animanga
  • Astronomi
  • Berita
  • FYI
  • Gambar
  • Kesehatan
  • Manhwa
  • Meme
  • Misteri
  • Pemrograman
  • Quotes
  • Template
  • Tips
  • Video
  • Lihat Lainnya..
    • Subscribe (Youtube)
    • LNG Blog
    • Catatandroid.com
    • Kirim Artikel
    • Google News
    • Instagram
    • Telegram
    • Twitter

fyi.

Website Informasi Seputar Meme, Astronomi,Fakta,Misteri dan berbagai Informasi Lainnya

    • Beranda
    • Contact
    • Disclaimer
    • Subscribe
    • Tentang Kami
    • Terms of Service
    • Privacy Policy
    • Beranda

    • Animanga

    • Astronomi

    • Berita

    • FYI

    • Gambar

    • Kesehatan

    • Manhwa

    • Meme

    • Misteri

    • Pemrograman

    • Quotes

    • Template

    • Tips

    • Video

    • Lihat Lainnya..

    Dapatkan Update Terbaru Lewat Email!

    Postingan Populer

    Mengungkap Identitas Pandora di Re:Zero

    Mengungkap Identitas Pandora di Re:Zero

    Animanga
    September 12, 2020
    0
    Meme Upin dan Ipin Part 16 : Upin ipin jadi tuyul

    Meme Upin dan Ipin Part 16 : Upin ipin jadi tuyul

    Meme
    Mei 10, 2020
    0
    Mengungkap Identitas Satella di Re: Zero

    Mengungkap Identitas Satella di Re: Zero

    Animanga
    Juni 20, 2020
    2
    Daftar Para Uskup Agung Di Re:Zero

    Daftar Para Uskup Agung Di Re:Zero

    Animanga
    Juli 02, 2020
    0
    Author
    IDLang
    Tautan disalin ke papan klip!
    Share Posts "Cara Pasang Javascript Skeleton Loading"
  • Salin link
  • Simpan Ke Daftar Bacaan
  • Bagikan ke Facebook
  • Bagikan ke Twitter
  • Bagikan ke Pinterest
  • Bagikan ke Telegram
  • Bagikan ke Whatsapp
  • Bagikan ke Linkedin
  • Bagikan ke Tumblr
  • Bagikan ke Line
  • Bagikan ke Email
  • HomePemrogramanCara Pasang Javascript Skeleton Loading
    Cara Pasang Javascript Skeleton Loading

    Cara Pasang Javascript Skeleton Loading

    Simpan Postingan
    Cara Pasang Javascript Skeleton Loading
    fyi.my.id - Javascript Skeleton Loading. Hallo Semuanya, Apakabar?. kali ini saya selaku admin blog FYI Indonesia mau membagikan tutorial cara memasang skeleton loading.

    Sebelum membaca lebih jauh, kita wajib tau skeleton loading itu apa dan fungsimya untuk apa.

    Apa itu Skeleton Loading ?

    Sebagai pengguna sosial media seringkali kita melihat proses memuat konten pada sebuah tampilan Timeline media sosial, yang memuat layout konten berupa panel-panel yang berwarna grey atau abu abu, beberapa saat sebelum muncul data berupa gambar, video atau tulisan. Yup, inilah yang disebut Skeleton Loading.


    Skeleton loading sendiri saat ini menjadi salah satu loading indicator yang sering digunakan oleh para Product Designer. beberapa Platform atau perusahaan besar seperti facebook, Youtube, linkeding dan Google juga menggunakanya dalam product mereka.


    Nah Setelah tau apa itu skeleton loading dan tau fungsinya untuk apa, kalian yang tertarik bisa ikuti turorial yang akan saya berikan dibawah.


    Harap diperhatikan kalau kode skeleton loading ini adalah kode mentah (butuh pengembangan), jadi kalian tidak bisa asal pakai karena itu akan berdampak pada tampilan tema anda jika salah memasang.


    Nah tanpa basa-basi lagi kita langsung ke tutorialnya.

    Contoh HTML Skeleton Loading

    <div class='progress sprogress'>
        <div class='skeleton2'/>
        <div class='skeleton3'/>
        <div class='skeleton4'/>
        <div class='skeleton5'/>
        <div class='skeleton5'/>
    </div>
    


    Kode HTML diatas adalah contoh dasar untuk membuat skeleton loading, nah lanjut ke CSS.

    Contoh CSS Skeleton Loading

    @-webkit-keyframes ant-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}@keyframes ant-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}
    .progress{transition: all .5s ease;}
    .skeleton2 {height: 30px;background: #e2e2e2;float: left;margin-top: 3px;border-radius: 5px;width: 162px;}
    .skeleton3, .skeleton4 {height: 14px;width: 100%;float: left;background: #e2e2e2;margin-top: 15px;border-radius: 10px;}
    .skeleton4 {width: 60%;margin-top: 5px;}
    .skeleton5 {height: 14px;width: 100%;float: left;background: #e2e2e2;margin-top: 15px;border-radius: 10px;}
    .skeleton5:last-child {margin-top: 5px;}
    .skeleton1, .skeleton2, .skeleton3, .skeleton4, .skeleton5 {background-color: #e2e2e2;background-image: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);-webkit-animation: ant-skeleton-loading 1.4s ease infinite;background-size: 400% 100%;animation: ant-skeleton-loading 1.4s ease infinite;transition: all .3s ease;}

    Diatas adalah contoh CSS untuk skeleton loading. Lanjut ke JSnya.

    Contoh JS Skeleton Loading

    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {$('.progress').removeClass('sprogress').addClass('hidden');});
    //]]>
    </script>

    Diatas adalah contoh javascriptnya, JS itu punya fungsi untuk menghapus HTML diatas sesudah loading selesai.


    Begitulah contoh dasar memasang skeleton loading, semoga bermanfaat dan maaf bila pemilihan kata-katanya bikin pusing haha. Dibawah ini contoh skeleton loading yang sudah kita buat diatas.



    Jika tampilan tidak sesuai dengan demo diatas/ tidak mengerti, silahkan komentar dibawah

    Pemrograman
    Oktober 06, 2020 • 1 komentar
    Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.
    DONASI

    Bantu berikan donasi untuk blog ini agar tetap bisa aktif update tema dan artikel lainnya.

    Donasi Via Gopay

    085156552410

    Isi dari komentar adalah tanggung jawab dari pengirim. FYI Indonesia mempunyai hak untuk tidak memperlihatkan komentar yang tidak etis atau kasar. Jika ada komentar yang melanggar aturan ini, tolong dilaporkan.
    1. Fernand J.17 Oktober 2020 11.52

      keren

      BalasHapus
      Balasan
        Balas
    Tambahkan komentar
    Muat yang lain...

    fyi.my.id

    fyi.my.id Website Informasi Seputar Meme, Astronomi,Fakta,Misteri dan berbagai Informasi Lainnya

    • Subscribe Channel Youtube
    • Ikuti Blog
    • Beli Domain Murah
    Copyrights 2020 FYI Indonesia.
    • Beranda
    • Cari
    • Posting
    • Trending
    • Tersimpan
      DONASI

      Bantu berikan donasi untuk blog ini agar tetap bisa aktif update tema dan artikel lainnya.

      Donasi Via Gopay

      085156552410