Flashing Loading Indicator With Logo - jqloader

jqloader is a small and easy-to-style jQuery loader plugin that makes uses of CSS animations to create flashing icons and text for loading indicators.

How to use it:

1. Insert the jqloader plugin's files into the html page.

<link rel="stylesheet" href="/path/to/css/jqloader.css" />
<!-- Scripts -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jqloader.js"></script>

2. Initialize the loading indicator on a specific container.

<div id="target">
  ... Content Will Be Loaded In Here ...
</div>

$("#target").jloader();

3. Note that the target element must have the position: 'relative' property. Elements without this property may have their loading indicators appear outside of their boundaries.

#target {
  display: block;
  position: relative;
}

4. Show the loading indicator on the element when needed.

$("#target").jloader('show', 'Loading Text Here...');

5. Hide the loading indicator when the content has been completely loaded.

$("#target").jloader('hide');

6. Toggle the loading indicator.

$("#target").jloader('toggle');

7. Sometimes you might need an error messages when there is an error occured.

$("#target").jloader('error', "Woopsie.");

8. Don't forget to replace the loading icon (typically your site logo) with your owns.

.jloader .jloader-icon {
  background-image: url(https://www.jqueryscript.net/images/logo.png);
  background-repeat: no-repeat;
  height: 60px;
  width: 350px;
  text-align: center;
}

9. Override the default styles of the loading overlay.

.jloader {
  background-color: rgba(52,152,219, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

Changelog:

2019-12-03

• Updated position for text slightly

---

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