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 |
Prototype Angular JS Workout Log | 2,599 Kb |
Regex Sensei | 1,551 Kb |
Simple Number Element Controls Demo | 3,384 Kb |
JS Playground | 3,242 Kb |
Attribute Modules for CSS | 5,810 Kb |
Flat Toggle Switch | 2,469 Kb |
General Tax Calculator | 2,902 Kb |
Angular Animation Playground | 2,894 Kb |
On A Boat | 2,615 Kb |
Attribute Module CSS Grid Mixins | 5,014 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 |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Chuck Norris Background | Manz | 1,967 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!