How to display an indeterminate progress bar until all data are loaded?

Markus Mohr commented on Mar 5, 2019

KoolReport 3.25.4.

I have 3 files: index.php, Report.php and Report.view.php. The latter is rather large (temporarily 160 kB of size) and involves a lot of calculations before display so that it takes about 10 sec until the displaying of charts starts.

Some users, especially these days, are accustomed to being notified when something lasts "that long".

Is there a way to display a spinner gif or an indeterminate progress bar (one simply recommencing again once the right-side end is reached) until all data are loaded and the chart display begins? Something like this:

Andrew Borell commented on Mar 5, 2019

The way you would normally do this? A div with loader class, css loader class, and javascript to remove the class on an event.

the div

<div id="my_loader" class="loader"></div>

the css

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

the javascript event

// jquery shorthand for document ready
$(function() {
    $('#my_loader').toggleClass('loader');
	
});

Adjust the animation and event as necessary. Guessing all three should be in your index without seeing the site.

Markus Mohr commented on Mar 5, 2019

Thank you, Andrew. Of course, I have my own recipes for that. But I wanted to know whether I needed to handle something special with KoolReport.

Here is my solution for index.php:

<?php
	error_reporting(E_ALL);
	//ini_set('display_errors', 'On');

	ob_start();

	require_once "koolreport/autoload.php";
	require_once "Report.php";

	require_once($_SERVER["DOCUMENT_ROOT"].'/DBSettings.inc.php');

	global $DATABASESERVER, $DATABASEUSERNAME, $DATABASEPASSWORD, $DATABASENAME;

	$report = new Report(array(
		"connectionString"=>"mysql:host=localhost;dbname=$DATABASENAME",
		"username"=>$DATABASENAME,
		"password"=>$DATABASEPASSWORD
	));

	$report->run()->render();
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style>
		/* Center the loader */
			#loader {
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 1;
				width: 150px;
				height: 150px;
				margin: -75px 0 0 -75px;
				border: 16px solid #f3f3f3;
				border-radius: 50%;
				border-top: 16px solid #3498db;
				width: 120px;
				height: 120px;
				-webkit-animation: spin 2s linear infinite;
				animation: spin 2s linear infinite;
			}

			@-webkit-keyframes spin {
				0% { -webkit-transform: rotate(0deg); }
				100% { -webkit-transform: rotate(360deg); }
			}

			@keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}

			/* Add animation to "page content" */
			.animate-bottom {
				position: relative;
				-webkit-animation-name: animatebottom;
				-webkit-animation-duration: 1s;
				animation-name: animatebottom;
				animation-duration: 1s
			}

			@-webkit-keyframes animatebottom {
				from { bottom:-100px; opacity:0 } 
				to { bottom:0px; opacity:1 }
			}

			@keyframes animatebottom { 
				from{ bottom:-100px; opacity:0 } 
				to{ bottom:0; opacity:1 }
			}

			#myDiv {
				display: none;
				text-align: center;
			}
		</style>
	</head>

	<body onload="myFunction()" style="margin:0;">

	<div id="loader"></div>

<!--
	<div style="display:none;" id="myDiv" class="animate-bottom">
		<h2>Tada!</h2>
		<p>Some text in my newly loaded page..</p>
	</div>
-->

	<script>
		var myVar;

		function myFunction() {
			myVar = setTimeout(showPage, 10);
		}

		function showPage() {
			document.getElementById("loader").style.display = "none";
			document.getElementById("myDiv").style.display = "block";
		}
	</script>
	</body>
</html>

<?php
  echo '<?xml version="1.0"?>';
  ob_end_flush();
?>

It works like a charm.

KoolReport's Forum

How to display an indeterminate progress bar until all data are loaded? #726

Build Your Excellent Data Report