Useful Loading Overlay
How do I make an useful loading overlay?
Reusable overlay for use primarily in AJAX calls.. What is a useful loading overlay? How do you make a useful loading overlay? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.
Useful Loading Overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Useful Loading Overlay</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Demo Link: Unrelated to Overlay -->
<a href="#" class="tester">Test Overlay</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Useful Loading Overlay - Script Codes CSS Codes
/* Demo Styles: Unrelated to Overlay */
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body { font-family: 'Montserrat', sans-serif;
}
a { color: #00a;
}
a:hover { color: #a00;
}
/* Styles for Ye Olde Fancy Loading Screen Overlay Thing */
/* TODO: Optimize some more for LESS */
#ajax-block-overlay { position: fixed; top: 0; left: 0; width: 0; height: 0; background-color: transparent; -webkit-transition: background 0.3s linear; -moz-transition: background 0.3s linear; -o-transition: background 0.3s linear; transition: background 0.3s linear; z-index: 100; background-color: rgba(0, 0, 0, 0.8);
}
#ajax-block-loading { position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -50px; width: 200px; height: 100px; text-align: center;
}
#ajax-block-loading span { height: 80px; width: 15px; background: #fff; display: inline-block; -webkit-animation: loader 1.25s infinite; -moz-animation: loader 1.25s infinite; -o-animation: loader 1.25s infinite; animation: loader 1.25s infinite;
}
#ajax-block-loading p { color: #fff; font-size: 20px; font-family: 'Montserrat'; text-transform: uppercase; margin-top: 5px; font-weight: 600; letter-spacing: .05em; text-align: center;
}
@-webkit-keyframes loader { 50% { height: 30px; margin-top: 50px; opacity: .5; }
}
@-moz-keyframes loader { 50% { height: 30px; margin-top: 50px; opacity: .5; }
}
@-o-keyframes loader { 50% { height: 30px; margin-top: 50px; opacity: .5; }
}
@keyframes loader { 50% { height: 30px; margin-top: 50px; opacity: .5; }
}
/* Mixin for adding bars. To add a bar you'll need to * put another span appended to #ajax-block-loading * in the js as well as adding another child below. */
#ajax-block-loading span:nth-child(1) { background: #a00; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s;
}
#ajax-block-loading span:nth-child(2) { background: #0a0; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s;
}
#ajax-block-loading span:nth-child(3) { background: #00a; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s;
}
#ajax-block-loading span:nth-child(4) { background: #fff200; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s;
}
Useful Loading Overlay - Script Codes JS Codes
/** * Ye Olde Loading/Saving/AJAXing Screen * For use on AJAX calls, adds overlay and pretty bar animation. */
var ajax_block_screen;
var ajax_unblock_screen;
(function ($) { /* Onloooooad */ $(function(){}); // Block the screen with a saving/please wait type message. // Accepts whatever message you want as parameter. ajax_block_screen = function(text) { text = typeof text !== 'undefined' ? text : 'One Moment'; $('body').append( $('<div id="ajax-block-overlay">').append( $('<div id="ajax-block-loading">') .append($('<span>')) .append($('<span>')) .append($('<span>')) .append($('<span>')) .append($('<p>').text(text)) ).css( { width: $(document).width(), height: $(document).height() } ) ); //return false; } // Remove the previous block. Accepts a delay in case UI // refreshes too fast/slow. ajax_unblock_screen = function(delay) { delay = typeof delay !== 'undefined' ? delay : 300; setTimeout(function(){ $('#ajax-block-overlay').remove(); },delay); //return false; }
})(jQuery);
/* Demo JS: Unrelated to Overlay */
$('.tester').click(function() { ajax_block_screen('YOLO'); ajax_unblock_screen(10000); console.log('click');
});
Developer | Bryan Fillmer |
Username | bfillmer |
Uploaded | December 11, 2022 |
Rating | 3 |
Size | 3,833 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Useful Loading Overlay | 3,833 Kb |
Continued Angular Testbed | 2,239 Kb |
Basic Javascript Chaining | 2,399 Kb |
Simple Number Element Controls Demo | 3,384 Kb |
Toggle Overlay on UL | 2,509 Kb |
Prototype Angular JS Workout Log | 2,599 Kb |
Flat Toggle Switch | 2,469 Kb |
Shopping Site Mockup | 6,977 Kb |
Attribute Module CSS Grid Mixins | 5,014 Kb |
Project Euler Problem 17 | 2,739 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Planet Awesome | Bartuc | 3,554 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!