Page Loading Effects pada web dengan HTML 5

membuat website dengan mudah dengan codrops, cepat tanpa kita perlu pusing membuat coding nya,,

Jika Anda telah mengunjungi situs yang dirancang cemerlang dari Nicolas Zezuka dan Teori Aktif Anda mungkin telah melihat animasi pemuatan licin yang terjadi sebelum konten baru ditampilkan. Jenis pembebanan gaya cukup trendi akhir-akhir ini dan kami ingin memberikan beberapa inspirasi. Idenya adalah untuk menghidupkan bentuk ke viewport dan menunjukkan indikator aktivitas. Ketika konten baru dimuat, bentuknya akan menghidupkan kembali untuk mengungkapkan halaman. Kami akan menggunakan SVGs animasi dengan Snap.svg untuk efek karena ini memungkinkan kita untuk membuat bentuk yang kompleks dan menarik transisi morphing.

Cara kita menunjukkan overlay loading dengan mendefinisikan animasi pada jalan yang kita definisikan dalam SVG berikut:

contoh scrip nya :

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">

        <path d="M 0,70 80,60 80,80 0,80 0,70"/>

    </svg>

</div>

<!-- /pageload-overlay -->

didefinisikan jalur awal yang tidak terlihat dalam viewport bagian dalam SVG dan jalur pembukaan dan penutupan data atribut pada divisi pageload-overlay. Seperti yang Anda lihat, kita menggunakan Viewbox kecil tapi kita meregangkan gambar sampai 100% dari lebar jendela dan tinggi sementara tidak menjaga aspek rasio. Jika kita tidak memiliki jalur penutupan ditetapkan, kami akan menghidupkan kembali ke jalan yang Intial. 
Perhatikan bahwa kita juga dapat menambahkan lebih dari satu jalur (dipisahkan oleh titik koma) yang memungkinkan untuk animasi bijaksana langkah dari SVG gambar seperti yang Anda lihat dalam demo pertama. 
Kami menetapkan pembagian overlay ke posisi tetap, yang mencakup semua halaman, dan menggunakan indikator CSS-hanya memuat dengan styling :: sebelum dan sesudah :: elemen semu divisi.

.pageload-overlay {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    visibility: hidden;

}

.pageload-overlay.show {

    visibility: visible;

}

.pageload-overlay svg {

    position: absolute;

    top: 0;

    left: 0;

}

.pageload-overlay svg path {

    fill: #fff;

}

dengan menggunakan visibilitas di sini karena mereka menggunakan gaya posisi tetap dengan pointer-kejadian tidak ada pada SVG sendiri menyebabkan beberapa masalah pada ponsel, sehingga kita posisi dan memanipulasi div orangtua sebagai gantinya. 
Anda mungkin telah memperhatikan bahwa animasi lingkaran juga dilakukan dengan menghidupkan dari satu jalan ke yang lain (tentu saja ada cara lain untuk melakukan hal ini, skala misalnya) tapi kami menggunakan nilai berikut untuk memastikan lingkaran adalah "responsif" tetapi tidak tidak meregang seperti bentuk lain: