Useful Loading Overlay

Developer
Size
3,833 Kb
Views
8,096

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 Previews

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');
});
Useful Loading Overlay - Script Codes
Useful Loading Overlay - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 11, 2022
Rating 3
Size 3,833 Kb
Views 8,096
Do you need developer help for Useful Loading Overlay?

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!

Bryan Fillmer (bfillmer) Script Codes
Create amazing captions with AI!

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!