Spinner while page is loading

[SeanF]

Hi:
I have some scripts in an SaaS application which take a while to assemble the data to display.

The system is built in PHP/MySQL but I would like a visual reminder for users to be patient while the data is collected.

Does anyone know w good way to display a "page loading" spinner (or similar) that can be called by the PHP script. (I imagine it would need to be javascript or ajax... or something)

Is there a "canned" code? or a "preferred practice"?

Thanks

[csdude55]

I forget where I found this, but I added this to the CSS:

.sk-circle {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative
}

.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}

.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background: #333;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both
}

.sk-circle .sk-circle2 {
transform: rotate(30deg)
}

.sk-circle .sk-circle3 {
transform: rotate(60deg)
}

.sk-circle .sk-circle4 {
transform: rotate(90deg)
}
.sk-circle .sk-circle5 {
transform: rotate(120deg)
}

.sk-circle .sk-circle6 {
transform: rotate(150deg)
}

.sk-circle .sk-circle7 {
transform: rotate(180deg)
}

.sk-circle .sk-circle8 {
transform: rotate(210deg)
}

.sk-circle .sk-circle9 {
transform: rotate(240deg)
}

.sk-circle .sk-circle10 {
transform: rotate(270deg)
}

.sk-circle .sk-circle11 {
transform: rotate(300deg)
}

.sk-circle .sk-circle12 {
transform: rotate(330deg)
}

.sk-circle .sk-circle2:before {
animation-delay: -1.1s
}

.sk-circle .sk-circle3:before {
animation-delay: -1s
}

.sk-circle .sk-circle4:before {
animation-delay: -0.9s
}

.sk-circle .sk-circle5:before {
animation-delay: -0.8s
}

.sk-circle .sk-circle6:before {
animation-delay: -0.7s
}

.sk-circle .sk-circle7:before {
animation-delay: -0.6s
}

.sk-circle .sk-circle8:before {
animation-delay: -0.5s
}

.sk-circle .sk-circle9:before {
animation-delay: -0.4s
}

.sk-circle .sk-circle10:before {
animation-delay: -0.3s
}

.sk-circle .sk-circle11:before {
animation-delay: -0.2s
}

.sk-circle .sk-circle12:before {
animation-delay: -0.1s
}

@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
transform: scale(0)
} 40% {
transform: scale(1)
}
}

@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
transform: scale(0)
} 40% {
transform: scale(1)
}
}

and then this to the Javascript:

var loading = '<div class="sk-circle">';
 for (i=1; i <= 12; i++)
  loading += '<div class="sk-circle' + i + ' sk-child"></div>';

 loading += '</div>';

I use jQuery, so I use this anywhere that I need the spinner:

// where "selector" is the element to be replaced with the spinner
$(selector).html(loading);

I'm not sure how your application appears on the screen, but one option might be to load the "loading" variable by default, then use jQuery to change that element to the result of the application once it's done loading.

[engine]

I prefer a moving bar rather than a spinner.

[robzilla]

Depends on how you call the scripts. If you call them with ajax you can easily show a loading indicator with javascript; if it's a direct call, e.g. through a hyperlink, you would have to look into output buffering, but that can be challenging to get right.

[SeanF]

Thanks for your replies, and for the code, csdude55.

Before I try that code, I found the following:
[stackoverflow.com...]

However it does not appear to work.

The question I have is: Will it only work where the page is actually loading or will it work when the page is waiting for the MySQL queried to complete (before the page starts loading)

[robzilla]

If the user follows a link from page A to page B, and page B takes a while to load, the user will stay on page A until page B is loaded, so you could show a spinner as soon as the link is clicked. A user coming to page B directly will not get that feedback, of course.

Alternatively (or even additionally), with output buffering the browser can download and render part of page B before it has been completely generated by the server.

It's a matter of preference and whatever works best on your site.

[csdude55]

@SeanF, whichever method you use, you'll have to load the spinner first, make sure it loads, THEN run the MySQL query. That makes things a little more complicated.

Were it me, I would do like @robzilla suggested and use AJAX to load the slow page separately, then replace the spinner element with the results of the AJAX when it's done.