iOS Style jQuery Overlays & Notifications Plugin - iosOverlay.js

File Size: 89.5 KB
Views Total: 13082
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
iOS Style jQuery Overlays & Notifications Plugin - iosOverlay.js

iosOverlay.js is a responsive and mobile-friendly jQuery plugin for creating Apple iOS style loading spinner, overlay and notification for your website.

Basic Usage:

1. Include the latest jQuery javascript library and jQuery iosOverlay.js script on your web page

<script src=""></script> 
<script src="js/iosOverlay.js"></script> 

2. Include required jQuery iosOverlay.js stylesheet to style the plugin

<link rel="stylesheet" href="css/iosOverlay.css">

3. Include spin.js for spinner object support (optinal)

<script src="js/spin.min.js"></script>

4. Create a button to trigger the plugin

<button id="loadToSuccess" class="btn">Loading Then Success</button>

5. The javascript

$(document).on("click", "#loadToSuccess", function(e) {
var opts = {
lines: 13, // The number of lines to draw
length: 11, // The length of each line
width: 5, // The line thickness
radius: 17, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#FFF', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
var target = document.createElement("div");
var spinner = new Spinner(opts).spin(target);
var overlay = iosOverlay({
text: "Loading",
spinner: spinner

window.setTimeout(function() {
icon: "img/check.png",
text: "Success"
}, 3e3);

window.setTimeout(function() {
}, 5e3);

return false;

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