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

how to make loading spinner javascript

I want to basically create a loading spinner for when my page is loading in javascript. Sometimes, the page takes long to load based on connection and I would just like to show a loading spinner while it loads.
I'm not sure where to start, I will show my main HTML/EJS code to show where I would need it. Thanks in advance for the help!
$(window).load(function() {
$('#loading').hide();
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color : #0e086b;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>

you can handle it manually. whenever you want to show a spinner you can call
$('#loading').show();
and to hide it after the ajax call use this in the callback function
$('#loading').hide();
The following solution will hide the spinner after 3 seconds, when the page loaded
$(document).ready(function() {
setTimeout(function(){ $('#loading').hide(); }, 3000);
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>

simply remove the anim !
on the real DOMContentLoaded event
window.addEventListener('DOMContentLoaded', (event) =>
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
);
sample code :
(simply click on snippet to stop the animation)
document.body.onclick = () => // simulate DOMContentLoaded event
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
#loading {
display : block;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : #040030e7;
z-index : 99;
}
#loading > div {
position : absolute;
top : calc(50% - 32px);
left : calc(50% - 32px);
width : 64px;
height : 64px;
border-radius : 50%;
perspective : 800px;
}
#loading > div > div {
position : absolute;
box-sizing : border-box;
width : 100%;
height : 100%;
border-radius : 50%;
left : 0%;
top : 0%;
border-bottom : 3px solid #f5f125;
}
#loading > div > div:nth-of-type(1) { animation : rotate-1 1s linear infinite; }
#loading > div > div:nth-of-type(2) { animation : rotate-2 1s linear infinite .3s; }
#loading > div > div:nth-of-type(3) { animation : rotate-3 1s linear infinite .6s; }
#keyframes rotate-1 {
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
#keyframes rotate-2 {
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
#keyframes rotate-3 {
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
<div id="loading"> <!-- loading annimation-->
<div> <div></div> <div></div> <div></div> </div>
</div>

Background animation looping smoothly

I am trying to add a background animation that will move from right to left and will loop cleanly. So far the animation works from right to left using keyframes but after 30s it stops and starts all over again. It doesn’t look very clean and smooth. Is there any alternative solution for this?
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("/media/background.svg");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}

Change the 50% keyframe to be the 100% keyframe, and set the end background position to -100vw.
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
And the same idea with animation-timing-function: linear:
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}

How can I create fullscreen crossfading slideshow on background without white flicker?

I'm creating a crossfade fullscreen slideshow on my webpage with HTML and CSS, however it's not working well.
I could create crossfading on background images, but there is a problem.
In first loading, there are white flickers between each images.
I don't want to avoid white flickers.
How can I fix them?
I've wrote with HTML and CSS to create a crossfade slideshow.
<body>
<div class="slideshow">
</div>
</body>
body {
margin: 0;
padding: 0;
}
.slideshow {
height: 100vh;
weight: 100%;
background-image: url('../images/1.jpg');
background-size: cover;
animation: slide 24s infinite;
}
#keyframes slide {
25% {
background-image: url('../images/2.jpg');
background-size: cover;
}
50% {
background-image: url('../images/3.jpg');
background-size: cover;
}
75% {
background-image: url('../images/4.jpg');
background-size: cover;
}
}
I don't need white flickers and apply a beautiful crossfade slideshow.

Flickers happen because the browser paints a new image, probably.
Try creating individual <div>s for each slide, position them absolute, and simply fade each of them away.
<body>
<div class="slideshow">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
</div>
</body>
.slideshow {
position: relative;
width: 100vw; height: 100vh;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
opacity: 0;
transition: opacity 1s;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
With CSS only:
#keyframes slide-1 {
0% , 40% , 100% { opacity: 0; }
20% { opacity: 1; }
}
#keyframes slide-2 {
0% , 20% , 60% , 100% { opacity: 0; }
40% { opacity: 1; }
}
#keyframes slide-3 {
0% , 40% , 80% , 100% { opacity: 0; }
60% { opacity: 1; }
}
#keyframes slide-4 {
0% , 60% , 100% { opacity: 0; }
80% { opacity: 1; }
}
.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }
Or with JS:
setInterval(function(){
var current = document.querySelector('.slide.active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
current.parentElement.firstElementChild.classList.add('active');
};
current.classList.remove('active');
}, 6000);

How to add a caption below a slider?

I was implementing this css3 slider with no jquery at all. How can I add captions for each slide below the slider?
I was working on this:
https://codepen.io/davidhc/pen/nLpJk
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
Thanks for your help :)

Please check this. I have added caption inside slide div and give this css for caption:
.slider p {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
background-size: cover;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
.slider p {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
<div class='slider'>
<div class='slide1'><p>slide1</p></div>
<div class='slide2'><p>slide2</p></div>
<div class='slide3'><p>slide3</p></div>
</div>

here is the html and it works with your code but you have to style it by css
<div class='slider'>
<div class='slide1'><div class="carl-caption">
<h3>burger lover</h3>
<p>Eat it pal</p>
</div></div>
<div class='slide2'><div class="carl-caption">
<h3>dubai</h3>
<p>dubai is wild</p>
</div></div>
<div class='slide3'><div class="carl-caption">
<h3>gray land</h3>
<p>imaginary land</p>
</div></div>
</div>
for css caption try this
.slide1:after{content:"My name is lover";
position: absolute;
top: 0;
right: 0;}

I Think this is what u want.
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
background-size: cover;
animation: fade 8s infinite;
-webkit-animation: fade 8s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
background-size: cover;
animation: fade2 8s infinite;
-webkit-animation: fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation: fade3 8s infinite;
-webkit-animation: fade3 8s infinite;
}
#keyframes fade {
0% {
opacity: 1;
}
33.333% {
opacity: 0;
}
66.666% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade2 {
0% {
opacity: 0;
}
33.333% {
opacity: 1;
}
66.666% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade3 {
0% {
opacity: 0;
}
33.333% {
opacity: 0;
}
66.666% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.slider p {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
.slide1:after {
position: absolute;
content: "Slide one";
bottom: -25px;
width: 100%;
text-align: center;
}
.slide2:after {
position: absolute;
content: "Slide Two";
bottom: -25px;
width: 100%;
text-align: center;
}
.slide3:after {
position: absolute;
content: "Slide Three";
bottom: -25px;
width: 100%;
text-align: center;
}
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>