Loading Indicator With Dynamic Loading Text - Incipit
File Size: | 33.8 KB |
---|---|
Views Total: | 4679 |
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.