Author: | BMSVieira |
---|---|
Views Total: | 407 views |
Official Page: | Go to website |
Last Update: | February 17, 2022 |
License: | MIT |
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>