We Keep Coding

How can I make loader cover the all page

There are my codes below. I want the loader cover the all page but it just covers the top. How can I make it cover the all page? There are my codes below. I want loader cover the all page but it just covers the top. How can I make it cover the all page?
/*loader*/
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #333233;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 3s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 3s infinite ease-in;
}
#keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
#keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}
<!--loader-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha512-AFwxAkWdvxRd9qhYYp1qbeRZj6/iTNmJ2GFwcxsMOzwwTaRwz2a/2TX225Ebcj3whXte1WGQb38cXE5j7ZQw3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
</script>
<!--loader-->

add position:fixed in main wrapper
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0

Animation not working despite the class is added

I want to add my beating animation only to the text between arrows (arrows shouldn't have beating).
But unfortunately I'm unable to find the reason why the animation is not working (the heart class which contains the animation is added to the container of text but no animation is visible).
How can I fix this?
setTimeout(() => prepareLabelShow("This is the caption"), 2500);
const prepareLabel = document.querySelector(".prepareLabel");
function prepareLabelShow(text, state) {
function startBeating() {
const prepareLabelGroup = document.getElementById("prepare-label-group");
prepareLabelGroup.classList.add("heart");
}
prepareLabel.innerHTML = `<span class="right-arrow arrow">‹</span><div style="display:inline" id="prepare-label-group">${text}</div><span class="left-arrow arrow">›</span>`;
startBeating();
prepareLabel.classList.add("prepareLabelShow");
prepareLabel.classList.remove("prepareLabelHide");
} // end of prepareLabelShow function
.prepare-label-container {
position: absolute;
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
top: 68.5vh;
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/*outline: 0.1vw dashed orange;*/
}
.prepareLabel {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
color: #f8f7fa;
opacity: 0;
margin: 0 auto;
}
.prepareLabelShow {
animation: prepareLabelAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes prepareLabelAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
.heart {
animation: beat .5s infinite alternate;
}
#keyframes beat {
0% { opacity:1; transform: scale(1); }
100% { opacity:1; transform: scale(0.8); }
}
.arrow {
/*color: #e9e1f2;
font-size: 1.2vw;*/
color: #ff9900;
font-size: 1.3vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
<div class ="prepare-label-container">
<p class="prepareLabel"></p>
</div>
I did not simplified the code in purpose.
The desired result is to see the beating animation in the text inside two arrows.

Check if banner is loaded

Hi i Have a custom made banner with following code
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, serif;
color: #003C78;
}
a {
color: #003C78;
}
.banner-wrap {
display: flex;
width: 728px;
height: 90px;
}
.page-container {
position: relative;
overflow: hidden;
width: 100%;
}
.page-container img {
width: 100%
}
.image-wrapper,
.text-wrapper {
position: absolute;
height: auto;
width: 411px;
}
.image-wrapper {
top: 0;
right: -155px;
z-index: 2;
animation: slideLeft 14.5s infinite ease 0s normal forwards;
}
.image-wrapper img {
position: absolute;
left: 0px;
top: -100px;
width: 150%
}
.text-wrapper h1,
.text-wrapper h2 {
position: absolute;
left: 90px;
padding: 0;
opacity: 0;
z-index: 3;
font-size: 1.3em;
}
.text-wrapper h1 {
animation: fade infinite 14.5s linear 0s normal forwards;
animation-delay: 4s;
top: 15px;
}
.text-wrapper h2 {
animation: fadeNew infinite 14.5s linear 0s normal forwards;
animation-delay: 7.8s;
}
.text-wrapper img {
position: absolute;
left: 50px;
bottom: 30px;
width: 468px;
height: 180px
}
.red-wrapper {
position: absolute;
bottom: 0px;
z-index: 9;
right: -600px;
color: #fff;
animation: slideLeftNew 14.5s infinite ease 0s normal forwards;
animation-delay: 7s;
padding-left: 15px;
border-bottom: 100px solid #E6000A;
border-right: 50px solid transparent;
height: 0;
width: 120px;
}
.red-wrapper h3 {
font-size: 1.1em;
font-weight: 300;
margin-top: 26px;
}
.logo img {
width: 80px;
height: auto;
margin: 17px;
}
img.kitchen {
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-ms-transform: translateY(-40%);
width: 63%;
position: absolute;
left: -18px;
animation: moveUp 14.5s infinite ease 0s normal forwards;
}
img.wall {
width: 11%;
position: absolute;
left: 0;
z-index: 9;
}
#keyframes slideLeft {
20.95% {
right: -155px
}
85%,
27.19% {
right: 135px;
}
}
#keyframes slideLeftNew {
15.95% {
right: -220px
}
20.19%,
37% {
right: 0
}
42% {
right: -220px;
}
}
#keyframes fade {
0% {
opacity: 0
}
23%,
14.38% {
opacity: 1
}
26% {
opacity: 0
}
}
#keyframes fadeNew {
0% {
opacity: 0
}
30%,
14.38% {
opacity: 1
}
33% {
opacity: 0
}
}
#keyframes moveUp {
0% {
transform: translateY(-40%);
}
50% {
transform: translateY(-45%);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hawa Sliding Solutions</title>
<meta content="text/html;charset=UTF-8" http-equiv="content-type">
</head>
<body>
<a href="http://hawa-suono.com/" target="_blank">
<div class="banner-wrap">
<div class="logo"><img src="logo.png"></div>
<div class="page-container">
<div class="text-wrapper">
<h1>Den Alltag auf stumm schalten.</h1>
<h2>Hawa Suono – die schalldichte Lösung.</h2>
</div>
<img class="wall" src="wall.png" />
<img class="kitchen" src="kitchen3.jpg" />
<div class="image-wrapper"><img src="tuer2.jpg" /></div>
<div class="red-wrapper">
<h3>Jetzt die Weltneuheit entdecken.</h3>
</div>
</div>
</div>
</a>
</body>
</html>
Now I need to check if the banner is loaded and work, and if it is not, then I need to put another image instead of the banner. I tried a lot of things, to check if image is there, to check if css is loaded, to check is the document loaded, but that solution can not work, because I must only check if the banner is loaded, not the whole document. So now, I am stacked and do not know what to do next.Also, I can not use jquery, only pure javascript.
Any help?
Thanks

If using JS,
function imgError(image) {
image.onerror = "";
image.src = "/images/wall.gif";
return true;
}
<img src="wall.png" onerror="imgError(this);"/>
Without JS,
<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />

you can do it with jquery
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
working fiddle : http://jsfiddle.net/kalmarsh80/nrAPk/

Changing CSS Animation anchor point

I have the following page (see image)
When I click the red button, I want a div to animate when it shows to the user. However, I want the animation to come from the button. Right now the animation comes from the center of the page.
Here's the code I have
#keyframes fadeInScale {
0%{
opacity:0;
transform: scale(0.5);
}
100%{
opacity:1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0%{
opacity:1;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(0.5);
}
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
When I click on the red circle, the user sees an overlay page (which is actually a div with class overlay that is absolutely positioned). I add fade-scale-in class to the div (with class overlay). The div then transitions from the center of the screen and grows to fit the user's screen. I want it so that the div transitions from the red circle. Can I use transforms to make this happen?
Here's the code. As you notice, when you click on the yellow circle, the div animates from the center and not from the yellow circle:
https://jsfiddle.net/e4g71y4m/3/

You can do this by adding transform-origin: top left; to the .overlay element. (Don't forget the prefixes (-webkit, -moz etc.)
var overlay$ = $('.overlay');
overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
console.debug('test');
if (e.animationName !== undefined && e.animationName == "fadeOutScale") {
overlay$.addClass('hide');
} else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") {
overlay$.addClass('hide');
}
});
$('.click').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-in');
});
$('.click-again').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-out');
});
#keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
.hide {
display: none;
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background: red;
transform-origin: top left;
}
.click {
background: yellow;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">Click me</div>
<div class="overlay hide">
Test
<div class="click-again">Click me again</div>
</div>

CSS/Jquery: Peel corner on hover and fold in half on click

Saw this cool 3x3 grid on this site and cant seem to re-create the animation it has.
The image folds a bit on hover and folds completely in half on a click.
Reference: http://doyouimpress.com/
I've tried doing something similar in CSS however the :active psuedo selector won't open the page completely unless you hold click. Would I only be able to re-create this animation w jquery?
Here's what I've done so far (webkit only): http://jsfiddle.net/JDH9/4wrnf/8/
HTML
<div id="container">
<div id="test">
<div id="left"></div>
<div id="center"></div>
</div>
CSS
#container {
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -100px;
-webkit-perspective: 1000;
}
#test {
position: relative;
}
#test div {
width: 200px;
height: 400px;
}
#left {
background: grey;
z-index: 3;
-webkit-transform-origin: 0% 50%;
-webkit-transition-delay: 1s;
}
#center {
background: grey;
z-index: 1;
}
#left {
position: absolute;
top: 0;
left: 0;
-webkit-transition-duration: 2s;
}
#test:hover #left {
-webkit-transform: rotateY(-45deg);
-webkit-transition-delay: 0s;
}
#test:active #left {
-webkit-transform: rotateY(-180deg);
-webkit-transition-delay: 0s;
}