Page Loading Effects | Codrops

Satu set kreatif efek loading halaman yang menggunakan animasi SVG dengan Snap.svg. Idenya adalah untuk menunjukkan overlay dengan bentuk animasi yang menarik sedangkan konten baru yang akan dimuat.
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:

<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 -->

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;

}

Kami 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:

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

Menggunakan slice akan mempertahankan aspek rasio tetapi skala gambar sehingga seluruh viewport ditutupi oleh Viewbox.  

Bukan hanya effect ini saja yang ada pada tutorial codrops masih bnyak lagi effect2 yang lebih keren, dan myang masih perlu di pelajariiii..

Terima kasih..
Semoga bermanfaat :)