acl-1.0.10

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