jSpinnerText

1. Download

Only the unminified JavaScript file is availabel right now. This option requires little to no setup.

2. HTML Setup

Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import jQuery Spinner Text into your webpage.

One last thing to note is that you have to import jQuery before importing jquery-spinner-text.js!


<!DOCTYPE html>
 <html>
   <head>
      <!--Import your header content -->
   </head>

   <body>
      <!-- HTML element into which spinner text to be loader -->
      <div id="spinner-text-container"></div>
      <!--Import jQuery before jquery-spinner-text.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/jquery-spinner-text.js"></script>
   </body>
 </html>

3. JavaScript Setup

Now call the spinner text initializer function (start_spinwriter) and your live text is ready.


 $(document).ready(function() {
    $("#spinner-text-container").start_spinwriter();
 });

All of the options below are available to customize Spinner Text.

Property	Default	Type	Description
Property:text	Value:Empty	Type:text/html	Description:A string value which will be loaded into the spinner text initialized element as html.
Property:interval	Value:10	Type:int	Description:Time interval between the change of text/character to the actual text/character.
Property:css	Value:Empty	Type:json	Description:CSS to apply to the element before appending the text.
Property:mode	Value:0	Type:int	Description:mode:0 Character wise incremental manner to construct word. mode:1 Whole text given will be processed together in incremental manner.
callback	Empty	function	After update callback.

Showcase

Simple Spinner Text

SETUP


 <!-- HTML element into which spinner text to be loader -->
 <div id="spinner-text-container"></div>
 <!-- Plugin initializer -->
 $(document).ready(function() {
    $("#spinner-text-container").start_spinwriter({
	'text':'Simple Spinner Text'
    });
 });

Text with interval 100ms

SETUP


 <!-- HTML element into which spinner text to be loader -->
 <div id="spinner-text-container"></div>
 <!-- Plugin initializer -->
 $(document).ready(function() {
    $("#spinner-text-container").start_spinwriter({
	'text':'Text with interval 100ms',
	'interval':100
    });
 });

HTML mixed text content

SETUP


 <!-- HTML element into which spinner text to be loader -->
 <div id="spinner-text-container"></div>
 <!-- Plugin initializer -->
 $(document).ready(function() {
    $("#spinner-text-container").start_spinwriter({
	'text':'<b>Bolded</b> Text'
    });
 });

Whole text loading together : mode 1

SETUP


 <!-- HTML element into which spinner text to be loader -->
 <div id="spinner-text-container"></div>
 <!-- Plugin initializer -->
 $(document).ready(function() {
    $("#spinner-text-container").start_spinwriter({
	'text':'your text here',
	'interval':50
	'mode':1
    });
 });

jQuery Spinner Text

Getting Started

Learn how to easily start using jQuery Spinner Text in your website.

1. Download

2. HTML Setup

3. JavaScript Setup

Showcase