Minimalist 4-Dot Loading Spinner With jQuery - loading.js

A minimal, animated, CSS-only, 4-dot spinner component for content loaders or page preloaders. jQuery is only used to start and stop the loading spinner as per your needs.

How to use it:

1. Load the stylesheet loading.css for the loading spinner.

<link rel="stylesheet" href="./loading.css" />

2. Load the main script loading.js after loading jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/loading.js"></script>

3. Start the loading spinner and specify the loading content displayed at the bottom of the spinner.

$.loading.start('Loading...')

4. Stop the loading spinner.

$.loading.end()

5. Override the default styles of the loading spinner. OPTIONAL.

.spin-dot-item {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  background-color: #1890ff;
  border-radius: 100%;
  -webkit-transform: scale(.75);
  -ms-transform: scale(.75);
  transform: scale(.75);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: .3;
  -webkit-animation: antSpinMove 1s infinite linear alternate;
  animation: antSpinMove 1s infinite linear alternate;
}

---

This awesome jQuery plugin is developed by wangtiant. For more Advanced Usages, please check the demo page or visit the official website.