Animated Random Word Loading Indicator – Word Loader

Preview:

Description:

A Word Loader JavaScript plugin that randomly animates an array of text before the whole page is completely loaded.

How to use it:

1. Load the stylesheet word-loader.css and JavaScript word-loader.js in the html.

<link rel="stylesheet" href="./src/word-loader.css" />
<script defer async src="./src/word-loader.js"></script>

2. Define an array of strings used for the word loader.

<div id="word-loader" words="['css', 'script', 'com']"></div>

// or
var wl_words = ["css", "script", "com"]

3. Initialize the word loader with default settings.

new WordLoader('word-loader')

4. Config the word loader by passing the following options object as the second parameter to the WordLoader function.

new WordLoader('word-loader',{
    // how much time the word will stay on page
    timeout: 300,
    // how much time the fading effect will last
    fadingDuration: 200,
    // how much time the fading effect will last
    overlayFadingDuration: 200,
    // how much time to wait before force-stop the loader if window.load event 
    // has not yet been triggered
    // useful to circumvent some eventual bug on event load listener
    forceStopTimeout: 20000,
    // how many words can at maximum been handled
    // avoid memory leaks
    maxWords: 50,
    // what class(es) to use for the word element
    wordClasses: 'word-word',
    // how much percentual of window will be used to display the words
    // percentual, from 0 (only center coords) to 100 (all screen)
    rangeAvailableFromCenter: 50, 
    // how much minimum distance in percentual successives words will have
    // Note: setting this value != false will make the animation NOT real random
    // absolute, distance between previous percentual position and new one
    // 0|false to make REAL random
    rangeDistanceFalseRandom: 10,
    // the words list
    words: false,
    // set a minimum time (in ms) for wich the loader will alyways be visible
    // even if load trigger has already been called
    minimumTime: 0,
    // to expose additional methods
    debug: false,
    // event on wich hide the loader 
    // (can be load or DOMContentLoaded or any custom event)
    hideOn: "load",
    // show an additional standard loader in the middle of the page
    centerLoader: true
    // area where words cannot be displayed
    /* 
      example config.
      x,y,width,height can be % or px
      {
        center: {
          x: "50%",
          y: "50%"
        },
        width: "10%",
        height: "10%",
      }
    */ 
    avoid: null
})