Package Exports

text-dots
text-dots/src/text-dots.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (text-dots) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

text-dots, A Dependency Free Loading Dots Utility

[ text-dots on npm ] [ text-dots on github ]

The "text-dots" utility allows you to add loading dots (...) that appear at an set interval to any DOM element.

Install

npm install text-dots --save

Usage

HTML

      <div class="blinder">
        <div class="loading-parent">
          <span id="loadingText"></span>  
        </div>
      </div>

JavaScript

      const textDots = require("text-dots");
      // the number of dots is optional - the default is three (...)
      const dots = textDots(5);

      // call start when you want the ..... to begin appearing
      // the third parameter is an optional interval in milliseconds, default is 500ms 
      dots.start(document.getElementById("loadingText", "Loading", 800));  

      // call stop when you want the ..... to stop
      dots.stop();

Config Object

Starting in 1.1.0, you can also use a configuration object as the second parameter on the initial call to textDots(), so that you won't need to explicitly call start()

      // start method is called inside of the textDots function
      const dots = textDots(7, {
        "element": document.getElementById("loadingText"),  
        "text": "Sleeping",
        "interval": 300
      });

      // call stop as usual
      dots.stop();

CodePen Example

https://codepen.io/anon/pen/WpyRvB

License

Published under the MIT license.