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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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");
document.body.appendChild(target);
var spinner = new Spinner(opts).spin(target);
var overlay = iosOverlay({
text: "Loading",
spinner: spinner
});

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

window.setTimeout(function() {
overlay.hide();
}, 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.