I'm using below script to show loading gif while the file is ready to download and then Once it is done , it hides after couple of seconds.
But I Only want to dowanload the file once, but when I click the link it download the same file twice. I found the code somewhere in forums, so I really don't know how to prevent it from running the url twice.
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
setTimeout(function() {
clickedLink.html(originalHtml);
window.location = destination;
},2500);
$('<iframe>').hide().appendTo('body').load(function() {
window.location =sagar;
}).attr('sagar', sagar);
});
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: darkblue;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
#-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
#keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; ">
<ol class="tree">
<li>
<label for="folder1">First Semester</label> <input type="checkbox" id="folder1" />
<ol>
<li>
<label for="subfolder11">Classical Mechanics </label> <input type="checkbox" id="subfolder11" />
<ol>
<li class="file">Solutions_to_Problems_in_Goldstein)</li>
<li class="file">Goldstein Solution Chapter 8 Soln</li>
<li class="file">Goldstein Chapter 9 Soln</li>
<li class="file">Numericals Jacobi Angle ( Hints )</li>
<li class="file">Angle Jacobi Numericals ( Complete Solution)</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
Any help would be really appreciated.
It seems you are calling window.location = destination; (which is triggering the browser to download the file) twice, inside that setTimeout function and after a hidden iframe is loaded, which I think is the correct place.
Just stop calling setTimeout like below:
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
$('<iframe>').hide().appendTo('body').load(function() {
window.location = destination;
clickedLink.html(originalHtml);
}).attr('src', destination);
});
Related
I am trying to create a foldable menu, through CSS and JS. Css works (almost) correctly (the menu folds and unfolds, even if the class is not correctly applied) but not the JS code, which should change the innerText of the <li> acting as a button from ">" to "<" and opposite.
I have been messing around with js code for a while (making sure that document.getElementById is not undefined), but neither element.innerText or element.innerHTML seem to work properly.
I have two questions:
When applying an animation, and having two classes, shouldn't respect both classes (I mean, the navbar should be red)? Should I add nav class AFTER the animation is done, or fill the navbar in red color through the animation?
Why does ignore InnerText/InnerHTML instructions?? I have debugged the code and definitely goes through that instruction and I cannot understand why the change is not done...
var navButton;
var navbar;
const init = ()=>{
navbar = document.getElementById("navbar");
navButton = document.getElementById("foldButton");
navButton.addEventListener('click', function(){
if(navbar.className==="init nav" || navbar.className==="fade-out-right nav"){
navButton.InnerText=`<p><</p>`;
toggleFold();
}
else{
navButton.InnerText=`<p>></p>`;
toggleFold();
}
});
}
const toggleFold = () => {
if(navbar.className==="init nav" || navbar.className==="fade-out-right nav"){
navbar.className="fade-in-left nav";
}else{
navbar.className="fade-out-right nav";
}
};
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
/* Base styles */
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 4%;
background: red;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
list-style: none;
}
.nav-list li {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a{
color:black
}
.nav-list a:hover {
background: blue;
}
.fade-in-left {
animation-name: fade-in-left;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
#keyframes fade-in-left {
from {
opacity: 1;
transform: translateX(-4%);
}
to {
opacity: 1;
transform: translateX(305px);
}
}
.fade-out-right {
animation-name: fade-out-right;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
#keyframes fade-out-right {
from {
opacity: 1;
transform: translateX(305px);
}
to {
opacity: 1;
transform: translateX(-4%);
}
}
<body onload="init()">
<nav id="navbar" class="init nav">
<ul class='nav-list'>
<li><a href='#welcome-section'>About</a></li>
<li><a href='#projects'>Work</a></li>
<li><a href='#contact'>Contact</a></li>
<li id="foldButton"><p>></p></li>
</ul>
</nav>
</body>
Thank you for helping me out.
Apart from my low IQ for the bad typo, whenever the color is not filled when using an animation, use internal container instead (in my case, I filled ul instead of navbar).
I have problem with finding the right position of click. I want to make google material design - ripple effect on clicked button. Circle need to be on button not somewhere else. So when you click on button white circle is showing somewhere else not above the wanted button. Where is the mistake i made?
$(function () {
var btnClick, bWidth, bHeight, x, y, posX, posY,d;
$(".btn").click(function (e) {
e.preventDefault();
posX = $(this).offset().left;
posY = $(this).offset().top;
bWidth = $(this).outerWidth();
bHeight = $(this).outerHeight();
d = Math.max(bWidth, bHeight);
$(".btn-over").remove();
if ($(this).find(".btn-over").length === 0) {
$(this).prepend("<span class='btn-over'></span>");
}
// btnClick = $(this).children(".btn-over");
// btnClick.removeClass("animation");
// if (!btnClick.height() && !btnClick.width()) {
// d = Math.max($(this).outerWidth(), $(this).outerHeight());
// btnClick.css({
// height: d,
// width: d
// });
// }
x = e.pageX - posX - bWidth / 2;
y = e.pageY - posY - bHeight /2;
$(".btn-over").css({
width: d,
height: d,
top: y + 'px',
left: x + 'px'
}).addClass("animation");
});
});
nav {
height: 3rem;
background-color: #424242;
color: #fff; }
.menu {
list-style: none;
float: right; }
.menu li {
display: inline-block; }
.btn-sigup {
box-shadow: none;
background-color: #4CAF50; }
.btn-sigup:hover {
background-color: #66BB6A;
box-shadow: none; }
.btn-login {
box-shadow: none;
background-color: transparent; }
.btn-login:hover {
box-shadow: none;
background-color: transparent; }
.btn-over {
display: inline-block;
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0); }
.animation {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-ms-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear; }
#-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5); } }
#-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5); } }
#-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5); } }
#keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header>
<nav>
<ul class="menu">
<li>
<button class="btn btn-login">LOG IN</button>
</li>
<li>
<button class="btn btn-sigup">SING UP</button>
</li>
</ul>
</nav>
</header>
There's nothing wrong with your JavaScript, you just need to set the position of the buttons to relative so that the positioning of the .btn-over span is contained within them. You should also consider setting the overflow of the buttons to hidden so that the "ripple" doesn't spill out of them.
$(function(){
var btnClick,bWidth,bHeight,x,y,posX,posY,d;
$(".btn").click(function(e){
e.preventDefault();
posX=$(this).offset().left;
posY=$(this).offset().top;
bWidth=$(this).outerWidth();
bHeight=$(this).outerHeight();
d=Math.max(bWidth,bHeight);
$(".btn-over").remove();
if($(this).find(".btn-over").length===0)
$(this).prepend("<span class=\"btn-over\"></span>");
x=e.pageX-posX-bWidth/2;
y=e.pageY-posY-bHeight/2;
$(".btn-over").css({
width:d+"px",
height:d+"px",
top:y+"px",
left:x+"px"
}).addClass("animation");
});
});
nav{
background-color:#424242;
color:#fff;
height:3rem;
}
.menu{
float:right;
list-style:none;
}
.menu li{
display:inline-block;
}
.btn-sigup{
background-color:#4CAF50;
overflow:hidden;
position:relative;
}
.btn-sigup:hover{
background-color:#66BB6A;
}
.btn-login{
background-color:transparent;
overflow:hidden;
position:relative;
}
.btn-over{
background:rgba(255, 255, 255, 0.3);
border-radius:50%;
display:inline-block;
position:absolute;
transform:scale(0);
}
.animation{
animation:ripple .65s linear;
}
#keyframes ripple{
to{
opacity:0;
transform:scale(2.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="menu">
<li>
<button class="btn btn-login">LOG IN</button>
</li>
<li>
<button class="btn btn-sigup">SING UP</button>
</li>
</ul>
</nav>
</header>
And here' an alternative implementation, with some extra features, that you can use on any element you wish. To implement it, you'll need to copy the JavaSript and the important stuff from the CSS and then you just give any element you want to apply this effect to a data-ripple-color attribute, which takes a value of any valid CSS color.
To apply this effect to an element every time it is clicked without waiting for the previous animation to complete add a data-ripple-multiple attribute to it with a value of true. See the button element below for an example.
(function(){
if(document.querySelector("[data-ripple-color]")){
var span=document.createElement("span");
span.classList.add("ripple");
document.addEventListener("click",function(event){
var target=event.target,color,data,multi,node,style;
while(!target.dataset.rippleColor&&target!==document.body)
target=target.parentNode;
data=target.dataset;
multi=data.rippleMultiple;
if((color=data.rippleColor)&&(multi||!data.rippleWait)){
if(!multi)data.rippleWait="true";
target.appendChild(node=span.cloneNode(0));
style=node.style;
style.background=color;
style.height=style.width=Math.min(target.offsetHeight,target.offsetWidth)+"px";
style.left=event.pageX-target.offsetLeft+"px";
style.top=event.pageY-target.offsetTop+"px";
setTimeout(function(){
target.removeChild(node);
if(!multi)delete data.rippleWait;
},750);
}
},0);
}
})();
/* Housekeeping */#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);*,*::before,*::after{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:none;background-clip:padding-box;border:0;border-radius:0;box-sizing:border-box;color:rgba(0,0,0,.87);font-family:Roboto,arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:500;line-height:1.2em;list-style:none;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:left;text-decoration:none;text-indent:0;text-rendering:auto;transition-duration:.2s;transition-property:none;transition-timing-function:cubic-bezier(.4,0,.2,1);}*>*{font-size:inherit;font-style:inherit;font-weight:inherit;}*>*,*::before,*::after{color:inherit;font-family:inherit;line-height:inherit;}
/* The important stuff */
[data-ripple-color]{
overflow:hidden;
position:relative;
}
.ripple{
animation:ripple 1s cubic-bezier(.4,0,.2,1);
border-radius:50%;
display:block;
opacity:0;
position:absolute;
}
#keyframes ripple{
from{
transform:translate(-50%,-50%) scale(1);
opacity:.54;
}to{
transform:translate(-50%,-50%) scale(54);
opacity:0;
}
}
/* Fiddle styles */
a[data-ripple-color],button[data-ripple-color]{
border-radius:3px;
cursor:pointer;
display:block;
font-size:24px;
font-weight:500;
line-height:40px;
margin:0 auto 8px;
padding:8px;
text-align:center;
width:200px;
}
a[data-ripple-color]{
background:#F44336;
color:#fff;
}
button[data-ripple-color]{
background:#3f51b5;
color:#fff;
font-size:24px;
line-height:40px;
padding:8px;
text-align:center;
text-transform:uppercase;
width:200px;
}
figure[data-ripple-color]{
border-radius:3px;
margin:0 auto 8px;
width:200px;
}
p[data-ripple-color]{
line-height:20px;
margin:0 8px 8px;
padding:8px;
}
<button data-ripple-color="#fff" data-ripple-multiple="true">Button</button>
<a data-ripple-color="#303f9f">Link</a>
<figure data-ripple-color="rgb(0,0,0)"><img src="http://placehold.it/200x200.png/e0e0e0?text=Image+%0A+Parent"></figure>
<p data-ripple-color="#616161">Paragrpah</p>
Basically I am working on website similar to http://keepearthquakesweird.com/.
I am not good in jQuery except the basic stuff but have created the layout in html5 and css3. The problem I am having is if you see on the website after clicking the enter link it takes you to a grid.I have created exact grid and able to pull up various div content when user clicks on various links by the following approach (you can see my code below) using css3 + jquery. So the question is that is there a better approach for pulling up the divs when user click on the link. the main question is I need the next previous button as in the website mentioned when you click any alphabet, so you can navigate through the description divs.
Looking for some honest advice and solution :)
$('a#alpha').click(function(e) {
e.preventDefault();
var id = $(this).attr('data-id');
$("#container > div").each(function() {
if ($(this).attr('data-id') == id) {
$(this).toggleClass('show-content');
}
});
});
$("a#cls").click(function() {
$("#container > div").each(function() {
if ($(this).hasClass('show-content')) {
$(this).removeClass('show-content');
}
})
})
#container div {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
transform: translateY(100%);
-webkit-transform: -webkit-translateY(100%);
-moz-transform: -moz-translateY(100%);
-o-transform: -o-translateY(100%);
transition: .4s ease-in all;
-webkit-transition: .4s ease-in all;
-moz-transition: .4s ease-in all;
z-index: 6;
opacity: 1;
}
.closeBtn {
position: fixed;
top: 20px;
right: 20px;
font-size: 30px;
color: #fff;
}
#content-1 {
background: #333;
}
#content-2 {
background: #ff0;
}
#content-3 {
background: #f00;
}
.show-content {
opacity: 1 !important;
z-index: 5 !important;
transform: translateY(0%) !important;
-webkit-transform: -webkit-translateY(0%) !important;
-moz-transform: -moz-translateY(0%) !important;
-o-transform: -o-translateY(0%) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Link to pull div
</li>
<li>
Link to pull div
</li>
<li>
Link to pull div
</li>
</ul>
<div id="container">
<div id="content-1" data-id="01">
X
<h1>TITLE</h1>
</div>
<div id="content-2" data-id="02">
X
<h1>TITLE</h1>
</div>
<div id="content-3" data-id="03">
X
<h1>TITLE</h1>
</div>
</div>
Hi friends I am trying to make CSS3 animation which will be trigger by jquery. Ie when the user submit some form I need to display animation (css3) for some duration and redirect it to the next page.
CSS3 animation:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
This is html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
Now when I user click on I need to display this effect for a fraction of time (some thing like alert box I mean while this animation is playing user shouldnt be able to do anything in the rest of the page)
Usually you make the page inaccessible by covering it with an element - an "overlay".
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
To activate it when the user clicks the submit button, just make it "hidden" by default. And when the user clicks the button, make it "visible". In it's most basic form:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
and the extra needed CSS:
.loadingOverlay {
/* ... */
display: none;
}
On the example I provide below you won't see the animation. The next page, by being blank, just loads too quickly. But you will see it on a "real" website situation.
Here's the live example: http://jsfiddle.net/9H7wf/2/
EDIT:
Max Boll suggested having the "loading effect" happening on the "new" page. It makes sense. But while a new page is being fetched, the "old" one still remains visible until a few key "http" things happen. See http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
So, it does make sense to have it on the "old" page.
I'd suggest you to use jQuery for this.
By default you could display your animation as an overlay (as JOPLOmacedo said).
Then you add the following to your javascript:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
This will show the loading overlay as long as the site needs to load (which you actually wanna show by that loading animation). Once the page is loaded, this javascript will fade it out.
My solution is based on JOPLOmacedo's answer.
EDIT
I just saw your new comment. To show it on button click, you can do it like this:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
Inside of the click event function you could start an interval to fade it out again after X seconds.
Hi Friends I found a solution to this one Thanx #JOPLOmacedo for helping me to fix this one
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}
I have a section on our website that loads quite slowly as it's doing some intensive calls.
Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?
Original Answer
I've needed this and after some research I came up with this (jQuery needed):
First, right after the <body> tag add this:
<div id="loading">
<img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your CSS:
#loading {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>
Finally, adjust the position of the loading image and the background-color of the loading div with the style class.
This is it, should work just fine. But of course you should have an ajax-loader.gif somewhere or use base64 url for image's src value. Freebies here. (Right-click > Save Image As...)
Update
For jQuery 3.0 and above you can use:
<script>
$(window).on('load', function () {
$('#loading').hide();
})
</script>
Update
The original answer is from jQuery and before flexbox era. You can use many view management libraries / frameworks now like Angular, React and Vue.js. And for CSS you have flexbox option. Below is CSS alternative:
#loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}
#loading-image {
z-index: 100;
}
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading, then it will wait an optional extra few seconds.
Works with jQuery 3 (it has a new window load event)
No image needed but it's easy to add one
Change the delay for more branding or instructions
Only dependency is jQuery.
CSS loader code from https://projects.lukehaas.me/css-loaders
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loadingDiv {
position:absolute;;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
}
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.
<ul>
<li>Works with jQuery 3, which has a new window load event</li>
<li>No image needed but it's easy to add one</li>
<li>Change the delay for branding or instructions</li>
<li>Only dependency is jQuery.</li>
</ul>
Place the script below at the bottom of the body.
CSS loader code from https://projects.lukehaas.me/css-loaders
<!-- Place the script below at the bottom of the body -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
Page loading image with simplest fadeout effect created in JS:
I have another below simple solution for this which perfectly worked for me.
First of all, create a CSS with name Lockon class which is transparent overlay along with loading GIF as shown below
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Now we need to create our div with this class which cover entire page as an overlay whenever the page is getting loaded
<div id="coverScreen" class="LockOn">
</div>
Now we need to hide this cover screen whenever the page is ready and so that we can restrict the user from clicking/firing any event until the page is ready
$(window).on('load', function () {
$("#coverScreen").hide();
});
Above solution will be fine whenever the page is loading.
Now the question is after the page is loaded, whenever we click a button or an event which will take a long time, we need to show this in the client click event as shown below
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
That means when we click this print button (which will take a long time to give the report) it will show our cover screen with GIF which gives result and once the page is ready above windows on load function will fire and which hide the cover screen once the screen is fully loaded.
Default the contents to display:none and then have an event handler that sets it to display:block or similar after it's fully loaded. Then have a div that's set to display:block with "Loading" in it, and set it to display:none in the same event handler as before.
Here's the jQuery I ended up using, which monitors all ajax start/stop, so you don't need to add it to each ajax call:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});
CSS for the loading container & content (mostly from mehyaa's answer), as well as a hide class:
#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-content {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
z-index: 100;
}
.hide{
display: none;
}
HTML:
<div id="loading" class="hide">
<div id="loading-content">
Loading...
</div>
</div>
Well, this largely depends on how you're loading the elements needed in the 'intensive call', my initial thought is that you're doing those loads via ajax. If that's the case, then you could use the 'beforeSend' option and make an ajax call like this:
$.ajax({
type: 'GET',
url: "some.php",
data: "name=John&location=Boston",
beforeSend: function(xhr){ <---- use this option here
$('.select_element_you_want_to_load_into').html('Loading...');
},
success: function(msg){
$('.select_element_you_want_to_load_into').html(msg);
}
});
EDIT
I see, in that case, using one of the 'display:block'/'display:none' options above in conjunction with $(document).ready(...) from jQuery is probably the way to go. The $(document).ready() function waits for the entire document structure to be loaded before executing (but it doesn't wait for all media to load). You'd do something like this:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
My blog will work 100 percent.
function showLoader()
{
$(".loader").fadeIn("slow");
}
function hideLoader()
{
$(".loader").fadeOut("slow");
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
<div class="loader"></div>
Create a <div> element that contains your loading message, give the <div> an ID, and then when your content has finished loading, hide the <div>:
$("#myElement").css("display", "none");
...or in plain JavaScript:
document.getElementById("myElement").style.display = "none";
This will be in synchronisation with an api call, When the api call is triggered, the loader is shown. When the api call is succesful, the loader is removed. This can be used for either page load or during an api call.
$.ajax({
type: 'GET',
url: url,
async: true,
dataType: 'json',
beforeSend: function (xhr) {
$( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
$("html, body").animate( { scrollTop: $(document).height() }, 100);
},
success: function (jsonOptions) {
$('#searching-loader').remove();
.
.
}
});
CSS
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
for drupal in your theme
custom_theme.theme file
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}
In html.html.twig file after skip main content link in body
{% if preloader %}
<div id="test-preloader" >
<div id="preloader-inner" class="cssload-container">
<div class="wait-text">{{ 'Please wait...'|t }} </div>
<div class="cssload-item cssload-moon"></div>
</div>
</div>
{% endif %}
in css file
#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 131px;
height: 131px;
background-color: #fff;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
}
.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
}
I needed a splash screen, which I implemented by reusing parts of the solutions listed here. It uses Vanilla JS for full backwards-compatibility.
Step 1: Add a background with a spinner gif on top of the page, then remove them when everything is loaded.
body.has-js::before {
content: '';
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
height: 100vh;
width: 100vw;
pointer-events: none;
transition: all .2s;
background: white url('/img/spinner.gif') no-repeat center center / 50px;
}
body.loaded::before {
opacity: 0;
width: 0;
height: 0;
}
Step 2: Add a little script right after the opening body tag to start displaying the load/splash screen.
<body>
<script>
// Only show loader if JS is available
document.body.className += ' has-js';
// Option 1: Hide loader when 'load' event fires
window.onload = function() { document.body.className += ' loaded'; }
// Option 2: Hide loader after 2 seconds, in case the 'load' event never fires
setTimeout(function(){ document.body.className += ' loaded'; }, 1000 * 2);
</script>
<!-- Page content goes after this -->
</body>
Based on #mehyaa answer, but much shorter:
HTML (right after <body>):
<img id = "loading" src = "loading.gif" alt = "Loading indicator">
CSS:
#loading {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
/* 1/2 of the height and width of the actual gif */
margin: -16px 0 0 -16px;
z-index: 100;
}
Javascript (jQuery, since I'm already using it):
$(window).load(function() {
$('#loading').remove();
});