Loading Indicator With Dynamic Loading Text - Incipit

Loading Indicator With Dynamic Loading Text - Incipit
File Size: 33.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Incipit is a jQuery plugin for creating attractive loading indicator with custom loading spinner, loading message, site logo and dynamic random quotes stored in a JSON file.

Features:

  • 10 loading spinner styles.
  • Randomly loads quotes from a JSON file.
  • Highly customizable loading screen.
  • Responsive design.

How to use it:

1. Insert the stylesheet incipit.css in the head section and the JavaScript incipit.js after jQuery library but before the closing body tag.

<link href="src/css/incipit.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="src/js/incipit.js"></script>

2. Initialize the jQuery Incipit loading indicator plugin with default settings.

$('body').IncipitInit({
  // options here
});

3. Show the loading indicator when needed.

$.Incipit('show');

4. Hide the loading indicator programmatically.

$.Incipit('hide');

5. All default settings to customize the loading indicator.

$('body').IncipitInit({

  // background color of loading screen
  backgroundColor : "#FFFFFF",

  // border color
  borderColor : "#CCCCCC",

  // text color
  textColor : "#000000",

  // span color
  spanColor : "#7e7e7e",

  // loading indicator
  // 'arrow', 'download', 'upload'
  // 'solid-snake', 'penduleum'
  // 'fading-balls', 'fading-lines'
  // 'round-block', 'oval-circle'
  icon : "fading-squares",

  // or 'fr'
  language : "en",

  // displays loading message
  note : false,

  // custom loading message
  noteCustom : "",

  // displays your site logo
  logo : false,

  // path to site logo
  logoSrc : _PATH+'image/your_logo.svg'
  
});

6. Add your own quotes to the loading indicator as you seen in the incipit-src.en.json.

{
  "material": [
    {
      "content": "The Nellie, a cruising yawl, swung to her anchor without a flutter of the sails, and was at rest.»",
      "author": "Joseph Conrad",
      "origin": "Heart of Darkness"
    },
    {
      "content": "« Christmas won't be Christmas without any presents, » grumbled Jo, lying on the rug.",
      "author": "Louisa May Alcott",
      "origin": "Little Women"
    },
    {
      "content": "Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.",
      "author": "Lyman Frank Baum",
      "origin": "The Wonderful Wizard of Oz"
    }
  ]
}

This awesome jQuery plugin is developed by justineSimmet. For more Advanced Usages, please check the demo page or visit the official website.