Cara Membuat Animasi Loading atau PreLoader Dengan HTML dan CSS

Cara Membuat Animasi Loading atau PreLoader Dengan HTML dan CSS

Cara Membuat Animasi Loading atau PreLoader Dengan HTML dan CSS
Cara Membuat Animasi Loading atau PreLoader Dengan HTML dan CSS


Hallo sobat ruangcoder, artikel kali ini tentang Cara Membuat Animasi Loading atau PreLoader Dengan HTML dan CSS atau loading proses menggunakan HTML dan CSS, untuk membuat nya pun cukup gampang ya , Nah untuk animasi ini sendiri sering kali sobat temui biasanya , dalam web yang sudah memakai landing page , enggak juga sih biasanya juga ada yang non landing page , ya nanti admin akan buatkan juga tutorial membuat landing page nya, untuk sementara ini cukup yang loader atau loading nya saja terlebih dahulu , ini sering sobat lihat saat sobat masuk ke halaman website seseorang , ada yang biasa memakai ini , ada yang juga enggak , kalau yang web nya untuk estetik biasanya memakai animasi , kalau sekedar untuk membaca biasanya tidak dipakai , karena akan lama dalam me-load website tersebut, oke dari pada basa basi terus , mending langsung kita buat saja tutorial nya.

Cara Membuat Animasi Loading atau PreLoader Dengan HTML dan CSS : 


Nah , silahkan sobat buat folder baru dan buat nama folder tersebut dengan nama latihan_loader , dan langsung sobat drag and drop ke Text editor sobat , disini admin seperti biasa masih menggunakan text editor Sublime , sobat buat file baru di dalam folder latihan_loader , buat file baru dengan nama index.html dan sobat ketikkan kode dibawah ini :





<link rel="stylesheet" type="text/css" href="style.css">
<div class="loader">
    <div class="loader-inner">
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
    </div>
</div>

Nah , lanjut sobat membuat file baru di dalam folder latihan_loader buat nama file tersebut jadi style.css , kemudian sobat ketikkan kode yang ada dibawah ini :





.loader {
    background: #000;
    background: radial-gradient(#222, #000);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.loader-line-wrap {
    animation: 
        spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
    ;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}

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

Nah , sekarang sobat tinggal lihat hasilnya saja , jadi tutorial Cara Membuat Animasi PreLoader Dengan HTML dan CSS sampai sini aja dulu , apabila tutorial ini bermanfaat silahkan sobat share tutorial ini sebanyak banyaknya , dan terimakasih sobat sudah berkunjung ,

Anda mungkin menyukai postingan ini