Loading

Dasar

Membuat loading kamu membutuhkan tag <div> dengan class .loading-circle diikuti class untuk style loading-nya, ada .loading-circle--gray, .loading-circle--blue, .loading-circle--red, .loading-circle--orange, dan .loading-circle--green, didalamnya buat element menggunakan tag <div> dengan class .loading-circle__fill. Untuk membuat loading yang lebih besar kamu perlu menambahkan class .loading-circle--lg setelah class .loading-circle.

CopyHTML
<!-- loading circle gray -->
<div class="loading-circle loading-circle--gray">
    <div class="loading-circle__fill"></div>
</div>

<div class="loading-circle loading-circle--lg loading-circle--gray">
    <div class="loading-circle__fill"></div>
</div>
<!-- loading circle gray end -->

<!-- loading circle blue -->
<div class="loading-circle loading-circle--blue">
    <div class="loading-circle__fill"></div>
</div>

<div class="loading-circle loading-circle--lg loading-circle--blue">
    <div class="loading-circle__fill"></div>
</div>
<!-- loading circle blue end -->

<!-- loading circle red -->
<div class="loading-circle loading-circle--red">
    <div class="loading-circle__fill"></div>
</div>

<div class="loading-circle loading-circle--lg loading-circle--red">
    <div class="loading-circle__fill"></div>
</div>
<!-- loading circle red end -->

<!-- loading circle green -->
<div class="loading-circle loading-circle--green">
    <div class="loading-circle__fill"></div>
</div>

<div class="loading-circle loading-circle--lg loading-circle--green">
    <div class="loading-circle__fill"></div>
</div>
<!-- loading circle green end -->

<!-- loading circle orange -->
<div class="loading-circle loading-circle--orange">
    <div class="loading-circle__fill"></div>
</div>

<div class="loading-circle loading-circle--lg loading-circle--orange">
    <div class="loading-circle__fill"></div>
</div>
<!-- loading circle orange end -->

Fixed

Membuat Fixed Loading kamu hanya perlu menambahkan class .loading-circle--fixed setelah class untuk style loading-nya atau setelah class .loading-circle--lg jika kamu menggunakan loading yang besar. Kamu bisa menyembunyikan loading-nya dengan menambahkan class utilities Bootstrap untuk display none .d-none setelah class .loading-circle--fixed. Gunakan Javascript & DOM untuk menghapus atau menambahkan class.

CopyHTML
<div class="loading-circle loading-circle--gray loading-circle--lg loading-circle--fixed">
    <div class="loading-circle__fill"></div>
</div>