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











