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.
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 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();
How to block all UI things in a webpage until all JavaScript files including jquery.js are loaded completely. Is there any possibility to do it using only JavaScript?
You can add a css mask with z-index set to higher than all your other ui elements on the page
In your page
<body>
<div class="mask"></div>
..
..
</body>
CSS
.mask {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #666;
overflow: hidden;
opacity: 0.7;
z-index: 99;
}
Once your jQuery is loaded, hide this mask.
$( document ).ready(function() {
$('.mask').hide();
});
Add some kind of this snippet at the very top of you body:
<div class="loading-overlay" id="loading">
<div class="loading">Loading..</div>
</div>
and this styles inline in HEAD:
<style>.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 1000;
}
.loading {
font-size: 20px;
text-align: center;
color: #FFF;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}</style>
Then after all javascript files execute this code:
document.getElementById('loading').style.display = 'none';
Make sure z-index property of the overlay is high enough to cover everything on the page.
However this solution is not reliable if some of your heavy scripts are loaded asynchronously.
Example: http://jsfiddle.net/ucPLW/
Statically listing the script tags in the head will ensure they are loaded before the DOM. This has been the case for as long as I can remember.
<html>
<head>
<!-- insert your script tags here -->
</head>
<body>
<!-- your DOM here -->
</body>
</html>
Its recommended to load the scripts at the bottom of the page instead so I'm not sure your motivations for this.
If by "UI Things," you mean the DOM, then you can put your javascript either at the end of your html like so:
<html>
<head>...</head>
<body>
<script>
// This javascript will execute after the HTML has loaded
</script>
</body>
</html>
Or if you want to use JQuery then you can put your UI code in a document ready function like this:
$(document).ready(function() {
// This javascript will also execute after the HTML has loaded
});
Best of Luck.
You can use the $(window).load() event for your code since this happens after the page is fully loaded and all the code in the various $(document).ready() handlers have finished running.
$(window).load(function(){
//your code here
});
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.
I'm currently working on my new website and I need help.
When you open the site you get a landing page with icons (sort of menu bar) and you can't scroll.
When you click, tadaaaa it is a one page design. I am thinking about a javascript/jquery kind of script.
Current css:
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: hidden;
}
Example jquery:
$("nav").on("click", function(e) {
$('html, body').css('overflowY', 'visible');
}
I am quite a noob about this so don't blame me for a weird kind of script. I am trying to learn javascript and jquery.
You should do this by adding a class to your page to indicate its state, and then change the styling in your stylesheet.
HTML:
Show whole page
Congratulations. You are viewing the page
JS:
$(document).ready(function () {
$("#loadpage").click(function () {
$("html").addClass("loaded");
});
});
CSS:
#page { display: none; }
html.loaded #page { display: block; }
html.loaded #loadpage { display: none; }
Demo:
http://jsfiddle.net/FHPzb/