Loading Indicator
General Loading
<div class="loader-general">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
Notice:
Use with fullscreen loading for taking action
Inline Loading
<div class="loader-inline">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
Notice:
Use for input validating
Loading Bar
<div class="loader-bar">
<span class="bar"></span>
<span class="bar"></span>
</div>
Notice:
Use for fetching data
Dot Loading
Checking . . .
<div class="loader-dot">
<h4> Checking
<span class="dot">
<span class="item">.</span>
<span class="item">.</span>
<span class="item">.</span>
</span>
</h4>
</div>
Fullscreen Load
Apply fullscreen load to General Loading
<div class="loader-fullscreen -opacity-background ">
<div class="loader-container">
<div class="loader-general">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
Notice:
Use the class .-opacity-background for general fullscreen loading with white opacity background and .-solid-background to cover all layers below