Minimal Text-based Loading Indicator With JavaScript – lwder.js

Preview:

Description:

lwder.js is a lightweight (1kb minified) plain JavaScript library for creating text-based (any characters even emojis) loading indicators with minimal effort.

How to use it:

1. Download and import the lwder.min.js library.

<script src="js/lwder.min.js"></script>

2. Create a container to hold the loading indicator.

• lwdertype: Trigger event, ‘default’ or ‘onclick’
• lwder: Loading text

<div class="example" 
     lwdertype="default" 
     lwder="...">
     CSSScript is loading 
</div>

3. Initialize the lwder.js on the container element.

document.addEventListener("DOMContentLoaded", function() {
  new Lwder({ selector: ".example" });
});

4. More HTML attributes to customize the loading indicator.

• lwderspeed: Animation speed
• lwderduration: Auto clear the indicator after this timeout
• lwdercondition: Determine whether to clear the original text, ‘default’ or ‘clear’

<div class="example" 
     lwdertype="onclick" 
     lwder="..."
     lwderspeed="200"
     lwderduration="5000"
     lwdercondition="clear">
     CSSScript is loading 
</div>