Loading Indicator PHP Function (with JS and CSS)

Creating a Loading Indicator with PHP, JavaScript, and CSS

A loading indicator is a visual cue that informs users that a process is underway, enhancing user experience by providing feedback during wait times. This snippet demonstrates how to create one using PHP, JavaScript, and CSS.

This handy function wraps some HTML, CSS, and JS to create a pulsing circle and content mask that can be dropped into any page that you like!

Code Explanation

The provided code snippet integrates PHP with JavaScript and CSS. The PHP function triggers the loading animation, while JavaScript handles the display logic, and CSS styles the indicator.

Why Use a Loading Indicator?

They are essential for:

• User Feedback: They inform users that their request is being processed.
• Improved UX: They reduce perceived wait times and prevent users from thinking the site is unresponsive.
• Professionalism: They add a polished look to your website.

Alternative Options

Other options to signal that processing is occurring include:

• Skeleton Screens: Display a placeholder layout that mimics the final content.
• Progress Bars: Show the progress of a task.
• Spinners: Simple animated icons indicating loading.

/**
 * Outputs the HTML and CSS for a loading screen with a pulsating circle
 * animation. The loading screen appears when the page starts loading and
 * fades out once the content is loaded. It also reappears when navigating
 * away from the page.
 */
function d5_load_screen(){
?>
	<style>
		#loading-screen{    
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			text-align: center;
			background: rgba(255,255,255,0.8);
			bottom: 0;;
			transition: opacity 0.5s ease-out;
        	opacity: 1; /* Start as visible */
		}

		.pulsating-circle {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 30px;
			height: 30px;
		}
		.pulsating-circle:before {
			content: '';
			position: relative;
			display: block;
			width: 300%;
			height: 300%;
			box-sizing: border-box;
			margin-left: -100%;
			margin-top: -100%;
			border-radius: 45px;
			background-color: #01a4e9;
			animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
		}
  
		.pulsating-circle:after {
			content: '';
			position: absolute;
			left: 0; 
			top: 0;
			display: block;
			width: 100%;
			height: 100%;
			background-color: white;
			border-radius: 15px;
			box-shadow: 0 0 8px rgba(0,0,0,.3);
			animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
		}


		@keyframes pulse-ring {
		0% {
			transform: scale(.33);
		}
		80%, 100% {
			opacity: 0;
		}
		}

		@keyframes pulse-dot {
		0% {
			transform: scale(.8);
		}
		50% {
			transform: scale(1);
		}
		100% {
			transform: scale(.8);
		}
		}
	</style>	
	<div id="loading-screen">
		<div class="pulsating-circle"></div>
	</div>

	<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('loading-screen').style.opacity = 0;
        setTimeout(function() {
            document.getElementById('loading-screen').style.display = 'none';
        }, 500);
    });

    window.addEventListener('beforeunload', function() {
        var loadingScreen = document.getElementById('loading-screen');
        loadingScreen.style.display = 'block';
        setTimeout(function() {
            loadingScreen.style.opacity = 1;
        }, 0);
    });
</script>
<?php

}