Develop Reference

Jquery loading div before page starts actually loads

I have a page that has to do quite a bit of work (5-6 seconds) of loading data from all over the place on the initial connection. It is slow because of the api endpoints I am calling, I have no control over it.
Is there a way to get a loading div to show before it starts doing all of its data collection?
The below doesnt do anything. I believe its because the page already starts gathering data before it gets to the jquery. I could be wrong. myjs.js is the file name and it is the first thing loaded on my page.
$('body').on('load', function(){
$body.addClass("loading");
});
and does the same thing
$(document).ready(function() {
$body.addClass("loading");
});
In layman's terms:
User goes to https://somewebsite.com
Jquery loading div shows
other functions run to gather data
jquery loading div is removed.
This is in the laravel framework if that affects anything.

There is actually a pretty simple way to do this. I recently experienced something similar.
I did something like this:
window.addEventListener('load', (event) => {
setTimeout(() => {
$('.jumping-dots-loader').slideUp(650);
}, 1000);
});
.jumping-dots-loader {
width: 100vw !important;
height: 100vh !important;
background-color: white;
z-index: 99999999999999999999999;
display: block;
border: none;
border-radius: 0;
margin: 0;
position: fixed;
padding: 20% 35%;
text-align: center;
}
.jumping-dots-loader span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: rgba(147, 194, 61, 1);
margin: 35px 0.85rem;
}
/* Add in animation */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumping-dots-loader">
<span></span>
<span></span>
<span></span>
</div>
<h1>
Howsit going?
</h1>
If you go through Mozilla's docs about the document.readystatechange event, you will see how the browser handles the loading order and can use this to your advantage. In my example, I add a container div which will cover the user's viewport. Then style some dots (add your own animation to them) which will be displayed while the document is loading. When the load state is reached, the placeholder div will be hidden and the loaded page is displayed.

how use loading gif in apex pages?

i want use loading gif in apex pages when doing a query:
i have a button and behind of it i use dynamic action for executing a query, in attributes of page in javascript section, i wrote these:
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js
and in css section, in inline, i wrote these:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(#APP_IMAGES#Preloader_1.gif) center no-repeat #fff;
}
and finally, behind of my button, in dynamic action , i created a true action (execute javascript code) and i wrote these:
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
after that, i created another true action (execute pl/sql code) for doing my query.
i expected when i clicked button, i saw gif loading until my query went done, but i didnt it and i havent any error.
what is my mistake?
thank you

Did you know there's a built-in API for this? Just call apex.util.showSpinner: https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.util.html#.showSpinner
You can then call remove on the object returned.
Here's an example from the doc:
var lSpinner$ = apex.util.showSpinner($( "#container_id"));
// Then later...
lSpinner$.remove();

Display loading progress modal doesn't hide

I need progress loading message after the SQL select finish executing. I've got a code from the internet but the modal doesn't hide after the loading finish. I need this kind of concept. Is there any code that can help me to make progress loading message after i select a query.. my problem is when i select too much data in SQL there is an eager loading that why i need progress message show that the process of selecting a data is ongoing/rendering from the database.
This is the code from internet now i'm trying to do but there is a bug the modal doesn't hide after loading finish.
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color:Black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>

First of all, live is deprecated use 'on' instead.
Next, what happens in your code, is that you append your modal to the body and show it with jquery's show on a submission of a form.
You can notice how there is no code whatsoever that removes/hides your modal. You have a multitude of options to do that. You will either need to obtain your modal when removing or hiding it, or save it in a variable inside of the ShowProgress function:
Remove your modal from the document.
Hide your modal using jquery's hide().
Add or remove CSS classes or styles.
Now, there is a third issue that might be happening: you have no idea when the form is done submitting. Which well... it never is unless you changed something else with some other code. A form submit, by default will do a post request to it's destination. So normally, the user will be redirected and the need for hiding the modal is non-existent.
I don't think it is valuable to show any code examples on how to do this here, as it doesn't seem that you have tried to understand the code you took from the internet. I do believe that this answer is sufficient enough to point you to the right google searchss

How to hide modal after processing is done on page

I have a web page that contains a button. When the button is clicked it calls some code in my code behind that processes. I want to display a "processing" message and a modal to make it so the user has to wait for the processing to be done before they do anything else. I use a javascript function to show the "processing" message and the modal when the button is clicked. When the processing is done the message goes away but the modal stays.
Here's my code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function ShowProgress2() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
var loading2 = $(".loading2");
loading2.show();
var top = Math.max($(window).height() / 2 - loading2[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading2[0].offsetWidth / 2, 0);
loading2.css({ top: top, left: left });
}, 200);
//$('modal2').modal('hide'); //this does not hide the modal when processing is done
//document.getElementById('modal2').style.display = 'none'; //this does not hide the modal when processing is done
}
</script>
.modal2
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading2
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
<asp:Button runat="server" ID="MedicaidDataGenerateBillingFile_Generate" Text="Generate" width="100px" OnClientClick="ShowProgress2();"/>
<div class="loading2" align="center" style="display:none;">
<div style="margin: auto; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 9998; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=70); opacity: 0.7;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/activity/roller.gif" /><br />
Generating Billing File...
</div>
</div>
Running this as is when the button is clicked the modal displays and the processing message displays in the middle of the modal. When the processing is finished the processing message goes away but the modal stays visible. I've tried a couple of things that are listed at the end of the javascript function that I have commented out, neither of them work to hide the modal. I need the code to make it so the modal goes away/is hidden at the same time the processing message goes away. If anyone would help me out with what needs to be changed/added to my code to accomplish this I would be grateful, thanks in advance.

You define modal like this:
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
document.getElementById('modal2').style.display = 'none';
this doesnt work, bc you modal doesn't have any id property, when you created it, only class. Either assign it, or use the class
$('modal2').modal('hide');
It doesn't work, because the class in jQuery should be written with dot $('.modal2');
And if you are not using any plugins for modals, the code should be
$('.modal2').hide();

After doing some additional looking into this I found a solution to getting the modal to hide/go away. I found this bit of code in another page where the similar code is being used and the modal is hidden after the processing is done:
<Triggers>
<asp:PostBackTrigger ControlID ="MedicaidDataGenerateBillingFile_Generate" />
</Triggers>
I included this code in my code and set the ControlID equal to my button ID that is getting clicked and now when the processing is finished the processing message goes away and so does the modal.
I hope this can help someone else.

How to show an animated gif as pop up and an alert after some seconds

I have an HTML page and unfortunatly I don't know much about it. In my HTML page there is a simple button that redirect to another website. What I would like to do is to show a popup that advise the user that he is moving to another site. If he accepts so he is redirected, if not then he stays in page.
I've made a graphic for all the process described before and it is a simple gif animated. what I wanna do is this:
The user click on the button
the gif animated pop up (and all the background is unclickable with a dark color if it's possible to do)
after 2 seconds the alert pop up next to the gif.
I've an example of what I wanna do. http://imgur.com/8dAf3Xp

Try this sample i created in js fiddle
fiddle
I use 2 overlapping divs to achieved this, wait 2 seconds and the pop-out will automatically show.
Hope this helps :)
HTML
<div id = "pop-out">
<div id = "message">
Message goes here
<button class = "ok"> Ok </button>
</div>
</div>
<div id = "container">
Content goes here
<button>You can't click me</button>
</div>
CSS
div#pop-out {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,.2);
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
div#message {
width: 50%;
height: 100px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
jQuery
$(document).ready(function(){
setTimeout(function(){
$("#pop-out").show();
},2000);
$("button.ok").click(function(){
$("#pop-out").hide();
});
});