Text Loading Effect By Animating Characters – letterloading.js

letterloading.js is a vanilla JavaScript library to simulate a text loading effect by animating an array of text strings.

Also can be used to create a typewriter-like text typing effect or to create a text rotator where the text is typed character by character.

How to use it:

1. Install the package with NPM and import the letterloading as an ES module.

# NPM
$ npm i letterloading --save

import LetterLoading from 'letterloading';

2. Or include the letterloading.js script in the document.

<script src="library/letterloading.js"></script>

3. Initialize the library and define an array of strings to be animated in the container you specify.

new LetterLoading('#myContainer', {
    strings: [
      "String 1",
      "String 2",
      "String 3"
    ],
});

4. Set the animation speed. Default: 9.

new LetterLoading('#myContainer', {
    loadspeed: 8
});

5. Set the time to wait before starting the animation. Default: 2500ms.

new LetterLoading('#myContainer', {
    delay: 3000
});

6. Determine whether to loop the animation. Default: true.

new LetterLoading('#myContainer', {
    loop: false
});

7. Determine whether to print strings in a random order. Default: true.

new LetterLoading('#myContainer', {
    randomizeEl: false
});

8. Hide and replace your text with a custom character before revealing.

new LetterLoading('#myContainer', {
    char: "***",
    hideChaar: false
});

9. Set the cursor type: line | block | underscore.

new LetterLoading('#myContainer', {
    cursorType: "line"
});

10. Determine whether to enable the cursor.

new LetterLoading('#myContainer', {
    cursor: true
});

11. Determine the Letter Loading Simulation: Liga or Typed.

new LetterLoading('#myContainer', {
    simulate: "typed"
});

Changelog:

v2.0.0 (08/10/2021)

• allowing easy simulations integration with individual exported simulations
• reduction in options power to only cater for custom options to enhance existing simulations by the community
• robustness by allowing Letterloading to be extendible

v1.2.1 (04/28/2021)

• handle err

v1.2.0 (04/23/2021)

• introduced simulate options, a beginning clipse into further animation choose with letterloading
• strictly define typedJS to only accept empty char and force randomizeEl to false
• allow options for cursorType: line | block | underscore