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();
Related
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.
I am trying to display wait animation from https://lottiefiles.com/
I created a JavaScript function, a region on the page 0 and call the function with dynamic action and it works, but display animation with all regions together.
Function:
function createLoadAnimation() {
document.getElementById("LoadAnimation1").innerHTML = "";
const anim2 = lottie.loadAnimation({
container: document.getElementById('LoadAnimation1'),
path: `https://assets10.lottiefiles.com/packages/lf20_wd6xyqkx.json`,
renderer: 'svg',
loop: false,
autoplay: true,
});
};
How to display animation when users waiting for page load?
You need to add the loader to the page and display it initially. Then once the page load is complete, you need to hide the loader as soon as possible.
HTML:
</head>
<body onload="removeLoader();">
<!-- Loader here -->
<div id="loader"><p id="loader-content">Loading...</p></div>
<div>Inner content here</div>
</body>
</html>
CSS:
html {
padding: 0;
margin: 0;
height: 100%;
}
#loader {
justify-content: center;
align-items: center;
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
z-index: 99999;
background: #f30
}
#loader p {
text-align: center;
color: #fff;
font-weight: bold;
font-size: 100px;
padding: 0;
margin: 0;
}
JS:
function removeLoader(){
setTimeout(()=>{
let loader = document.getElementById('loader');
// hide the loader
loader.style = 'display: none;';
},
1000);
}
CodePen
The Ariel's answer will not work for you as you would like to.
The problem is, that this solution first draw html which is connected to external css and js. It takes a while to load js and especially with library like lottie is.
The best way to prevent this problem is load just lottie and css you need to make loadpage first. Don't be afraid to use some basic css inline!! I know, it is not recommended, but note, it will render in the same time with your html, so there is no chance to blink default content before load animation comes in.
It is enough to write inline style for absolute position of the container.
See this page:
https://www.hviezdne-byvanie.sk/
The green container has inline styles. Everything else, loads after it. You have no chance to see content before you see loading animation.
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
I am trying to display a loading symbol while the page loads, as on a button click it takes roughly 40 seconds to load the data, and I want a placeholder.
I have tried to use jquery as shown:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(".loader").fadeout("slow");
})
</script>
The .loader class CSS looks like this:
.loader
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/loading.gif') 50% 50% no-repeat rgb(249,249,249);
}
I receive an error when I run the project:
"Error: Object doesn't support property or method 'fadeout'"
What could be the issue?
Just a small mistake I figured out is that.
fadeout should be fadeOut
So,
$(window).load(function () {
$(".loader").fadeOut("slow");
})
would work for sure. :)
I have created a page that shows an animation when it begins a server side operation. The div looks like this:
<div id="loading" style="display: none;">
<img id="loading-image"
src="../../Images/waiting-animation-extra.GIF" alt="Loading..." />
</div>
My client script looks like this
$(document).ready(function () {
$("#btnExportToExcel").click(function () {
$('#loading').show();
});
});
My Css looks like this:
<style type="text/css">
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 40%;
left: 45%;
z-index: 100;
}
</style>
When I click my asp button, the animation starts and the report is prepared. The problem is that I would like to hide the animation when the report is downloaded. However, when the download is done, the .gif just freezes. I have tried ScriptManager.RegisterStartupScript(this, GetType(), "DoHide", "$("#loading").hide();", true); in the code behind at various points but it seems to be affected by this code:
DateTime time = DateTime.Now;
Response.Clear();
Response.AddHeader("content-disposition"
,string.Format("attachment;filename=Equipement Man Game Played {0}.xls"
,time.ToShortDateString()));
Response.ContentType = "application/vnd.xls";
System.IO.StringWriter writer = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(writer);
gdvData.RenderControl(html);
Response.Write(writer.ToString());
Response.End();
Response.Write and Repsonse.End stop the .hide(). All I need to do is to show an animation that will be started once the button is clicked and stops once the server-side database work and xls download is done. I am willing to take a different approach.
From asp.net button this will not work as you expecting. You need to call your download using AJAX from regular HTML button and on AJAX success you can hide your div with image.