animated-ellipsis

Animated-Ellipsis is used to indicate that an action is being executed, nicely combined with a tip sentence.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
animated-ellipsis
100.2.02 years ago7 years agoMinified + gzip package size for animated-ellipsis in KB

Readme

Animated-Ellipsis #
animated-ellipsis
Animated-Ellipsis is used to indicate that an action is being executed, nicely combined with a tip sentence.

Install ##

npm install animated-ellipsis

or
<script src="https://cdn.rawgit.com/szchenghuang/animated-ellipsis/master/src/index.js"></script>

Usage ##

  • Put an element on the page with empty children.
  • Call animateEllipsis on the element.

That's it. An animated ellipsis will be displayed on the element.

Configuration ##

There are some settings you can tweak by setting data attributes on the element.
<span class="ae" data-font-size="2rem" data-margin-left="0.1rem" data-spacing="0.1rem"></span>

  • data-font-size: The font size of dots. Default: 2rem.
  • data-margin-left: The spacing between the sibling text and the first dot. The value is set to margin-left of the first dot. Default: 0.1rem.
  • data-spacing: The spacing between dots. The value is set to margin-left of the second and third dots. Default: 0.1rem.

Example ##

<div>
    Loading<span class="ae"></span>
</div>

// Import first.
require( 'animated-ellipsis' );

// Animate it.
document.querySelector( '.ae' ).animateEllipsis();

loading

License ##

MIT. See LICENSE.md for details.