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

Category: Javascript , Loading | February 17, 2022
Author:BMSVieira
Views Total:407 views
Official Page:Go to website
Last Update:February 17, 2022
License:MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply