Div加载前的进度条

Question

1. I need to show a progress bar or loading gif for 5 seconds before class .tiles is shown each time page loads

Need to show a simple "reload game" or "try again" button after function success inside class .tiles area instead of BootstrapDialog.show on whole page modal like in code below

Not have much knowledge of ajax

Answer 1

first create a div with laoding gif, where you want to display it

<div id="loadingmessage" style="display:none;"><img src="URL"></div>

then use this before your ajax call

$('#loadingmessage').show();

then after success or failure function

$('#loadingmessage').hide();

same is the case with button, create a button and sets it to display:none; then after success function calls it to show. I hope it helps.

Answer 2

You can use pace which requires minimal setup and will run automatically for every ajax request.

Pace is a light weighted library and you have the freedom to customize your loader.