Cara Membuat Loading Page Sendiri dengan HTML dan CSS

                No comments   
Cara Membuat Loading Page Sendiri dengan HTML dan CSS. Anda tentunya sudah mengenal dengan bahasa pemrograman HTML dan CSS, apa lagi bagi Anda yang sering bermain website tentunya sudah sepenuhnya menguasai bahasa pemrograman tersebut. 

Dalam pembahasan kali ini saya akan sedikit membahas tentang bagaimana cara membuat animasi sebuah loading page menggunakan bahasa pemrograman HTML dan CSS tanpa harus melibatkan javascript, jqueri dan lain lain. Untuk itu tutorial ini sangatlah mudah apabila Anda ingin mengikuti panduan panduan dari awal hingga akhir. 

Cara Membuat Loading Page Sendiri dengan HTML dan CSS


Sebelum membuat sebuah animasi loading page maka Anda harus menyiapkan alat tempur terlebih dahulu supaya dalam membuat animasi loading page ini bisa lebih mudah. Alat tempur yang harus Anda donwload bisa Notepad++ ataupun Sublime Text, terserah mau pilih yang mana terserah Anda. Apabila semuanya sudah tersiapkan maka copilah kode yang berada di bawah ini:

<html>
<head>

    <style>
    /*TENGAH LOADER*/
    #loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 150px;
        height: 150px;
        margin: -15px 0 0 -15px;
        border: 16px solid #000;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        border-right: 16px solid green;
        border-bottom: 16px solid red;
 
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 150px;
        height: 150px;
        margin: -95px 0 67 -95px;
        border: 16px solid #000;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        width: 120px;
        height: 120px;
        border-radius: 800px 50px;
        border-spacing: 100px;
        border-top: 10px solid blue;
        border-right: 10px solid green;
        border-bottom: 10px solid red;
        border-left: 10px solid pink;
    }

        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /*Add animation page */
        .animation-bottom{
        position: relative;
        -webkit-animation-name;
        animatebottom;
        -webkit-animation-duration: 1s;
        animation-name:animatebottom;
        animation-duration: 1s;
        }

        @-webkit-keyframes
        animatebottom{
            from{ bottom:-100px; opacity: 0 }
            to{bottom:0px; opacity: 1}
        }

        @keyframes animatebottom{
            from{bottom:-100px; opacity: 0}
            to{bottom:0; order: 1}
        }

        #myDiv {
        display: none;
        text-align: center;
    }

    </style>
</head>

<body onload="myFunction()" style="margin:0;">

<div class="loader"></div>

<div id="loader"></div>

<dir style="display: none;" id="myDiv" class="animatebottom">
    <h2>
    TADA ADA ADA
    </h2>
    <p>
    SAma sam
    </p>
</dir>

<script>

    var myVar;

    function myFunction() {
        myVar = setTimeout(showPage,3000);
    }

    function showPage() {
        document.
        getElementByld("loader").
        style.display="block";
        document.
        getElementByld("myDiv").
        style.display="none";
    }

</script>

</body>
</html>

Jika semuanya sudah di copy maka silahkan di paste pada editornya masing masing,  setelah itu tinggal di save as dengan extension .html. Untuk hasil jadinya Anda bisa melihatnya di link DEMO yang berada di bawah.


DEMO


Mungkin cukup itu saja yang dapat saya sampaikan tentang cara membuat sebuah halaman loading dengan HTML dan CSS sendiri. Apabila Anda ingin mengganti warnanya maka caranya cukup mudah dan simple untuk di lakukan, tinggal cari kode yang seperti pada di bawah ini:

 border-top: 10px solid blue;
 border-right: 10px solid green;
 border-bottom: 10px solid red;
 border-left: 10px solid pink;

Dari kode di atas ada 4 baris dan masing masing baris memiliki warna yang berbeda beda, di situ Anda bisa menggantinya warna tersebut dengan warna yang lainnya sesuai kesukaan Anda.

Mungkin cukup sekian postingan dari saya ini, apabila kurang jelas dan banyak kekurangan mohon untuk selalu di maafkan.
Cirebon Indonesia

0 komentar:

Post a Comment