We Keep Coding

Implementing a full page animated loader

I have created a ripple full page loader. I'm trying to create the one like here.
I want the code to be simple with no plugins ideally.
I can load the page preloader but am wondering how I get the loading page to disappear once the main page has loaded? The page just will not fade! Have researched and tried all sorts of methods.
This is the code so far:
// Page loading animation
$(window).on('load', function() {
if ($('.cover').length) {
$('.cover').parallax({
imageSrc: $('.cover').data('image'),
zIndex: '1'
});
}
$("#preloader").animate({
'opacity': '0'
}, 600, function() {
setTimeout(function() {
$("#preloader").css("visibility", "hidden").fadeOut();
}, 300);
});
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper>div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper>div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper>div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>

You can do it as below, using vanilla JavaScript. You can adapt it for jQuery. Also you can remove that setTimout, added just for testing purpose.
window.addEventListener("load", () => {
setTimeout(() => {
document.getElementById("preloader").classList.add("hide");
}, 1000);
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
#preloader.hide {
opacity: 0;
pointer-events: none;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper > div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>

how to add loading.. on ajax response

i have loading html css code as i pasted here,now in my ajax response Now Loading: Please Wait i want to replace it by custom html css loading page, how can i do this?
$(document).on('open.zf.reveal', "#site_modal_5", function (e) {
var $modal = $(this);
var ajax_url = $modal.data("ajax-url");
if (ajax_url) {
$modal.html("Now Loading: Please Wait ");
$.ajax(ajax_url).done(function (response) {
$modal.html(response);
});
}
});
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader {
height: 20px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader--dot {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 20px;
width: 20px;
border-radius: 100%;
background-color: black;
position: absolute;
border: 2px solid white;
}
.loader--dot:first-child {
background-color: #8cc759;
animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
background-color: #8c6daf;
animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
background-color: #ef5d74;
animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
background-color: #f9a74b;
animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
background-color: #60beeb;
animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
background-color: #fbef5a;
animation-delay: 0s;
}
.loader--text {
position: absolute;
top: 200%;
left: 0;
right: 0;
width: 4rem;
margin: auto;
}
.loader--text:after {
content: "Loading";
font-weight: bold;
animation-name: loading-text;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes loader {
15% {
transform: translateX(0);
}
45% {
transform: translateX(230px);
}
65% {
transform: translateX(230px);
}
95% {
transform: translateX(0);
}
}
#keyframes loading-text {
0% {
content: "Loading";
}
25% {
content: "Loading.";
}
50% {
content: "Loading..";
}
75% {
content: "Loading...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
</div>

You can change the $modal.html('your text') with the loader's HTML. See the snippet below.
I have added .loader-container so you can hide the loader inside as it probably should not be visible all the time. Also, you can easily use jQuery .html() to append the inner content to the modal. In this case .loader.
var $loader = $('.loader-container');
$(document).on('open.zf.reveal', "#site_modal_5", function(e) {
var $modal = $(this);
var ajax_url = $modal.data("ajax-url");
if (ajax_url) {
$modal.html($loader.html());
$.ajax(ajax_url).done(function(response) {
$modal.html(response);
});
}
});
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader-container .loader {
display: none;
}
.loader {
height: 20px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader--dot {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 20px;
width: 20px;
border-radius: 100%;
background-color: black;
position: absolute;
border: 2px solid white;
}
.loader--dot:first-child {
background-color: #8cc759;
animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
background-color: #8c6daf;
animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
background-color: #ef5d74;
animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
background-color: #f9a74b;
animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
background-color: #60beeb;
animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
background-color: #fbef5a;
animation-delay: 0s;
}
.loader--text {
position: absolute;
top: 200%;
left: 0;
right: 0;
width: 4rem;
margin: auto;
}
.loader--text:after {
content: "Loading";
font-weight: bold;
animation-name: loading-text;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes loader {
15% {
transform: translateX(0);
}
45% {
transform: translateX(230px);
}
65% {
transform: translateX(230px);
}
95% {
transform: translateX(0);
}
}
#keyframes loading-text {
0% {
content: "Loading";
}
25% {
content: "Loading.";
}
50% {
content: "Loading..";
}
75% {
content: "Loading...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class="loader-container">
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
</div>
</div>
Another approach is to make the loader's HTML code as a string in JS, so you can use it in the .html() for the modal as this example:
var loader = `
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
`;
$modal.html(loader);
EDIT: This is a working example with a fake modal and ajax request. I am using setTimeout to reproduce the delay from the ajax request. Probably the error is somewhere else in your code.
Probably the best approach, if you have access to the modal's HTML, is to add your loader code inside the modal in the HTML and change it with the ajax response when the request is ready.
var $loader = $('.loader-container');
var $btn = $('.btn-modal');
$btn.on('click', function(e) {
var $modal = $('.modal');
$modal.addClass('open');
$modal.html($loader.html())
setTimeout(function() {
$modal.html(`<div><h2>Your response code when ajax is successfuly completed</h2></div>`)
}, 3000);
});
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader-container .loader {
display: none;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
padding: 20px;
background: teal;
color: red;
opacity: 0;
visibility: hidden;
}
.modal.open {
opacity: 1;
visibility: visible;
}
.loader {
height: 20px;
width: 250px;
margin: auto;
}
.loader--dot {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 20px;
width: 20px;
border-radius: 100%;
background-color: black;
position: absolute;
border: 2px solid white;
}
.loader--dot:first-child {
background-color: #8cc759;
animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
background-color: #8c6daf;
animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
background-color: #ef5d74;
animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
background-color: #f9a74b;
animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
background-color: #60beeb;
animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
background-color: #fbef5a;
animation-delay: 0s;
}
.loader--text {
position: absolute;
top: 200%;
left: 0;
right: 0;
width: 4rem;
margin: auto;
}
.loader--text:after {
content: "Loading";
font-weight: bold;
animation-name: loading-text;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes loader {
15% {
transform: translateX(0);
}
45% {
transform: translateX(230px);
}
65% {
transform: translateX(230px);
}
95% {
transform: translateX(0);
}
}
#keyframes loading-text {
0% {
content: "Loading";
}
25% {
content: "Loading.";
}
50% {
content: "Loading..";
}
75% {
content: "Loading...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<button class="btn-modal">Click here to open the modal</button>
<div class="modal">
<div class="modal__content">Modal content to be changed with loader or response</div>
</div>
<div class="loader-container">
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
</div>
</div>

how to make wave animation?

I want to make a wave. There is sample animation that i made. so i want to change this animation like this. there is number of rectangles. Expanding both sides of the rectangle
What i want to do is this time rectangle is expanding both sides(Up & down sides) but i want to expand only on side(up side) like music player.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50%{
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Just set the transform-origin of the span to bottom center(default is center center).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
transform-origin: bottom center;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50% {
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Timing text transition with pulsating rings

The goal is to have the text transition to 3 different words. I want them to be in sync with the animated rings(text change after every two rings animate fading in and fading out) I'm not sure what is the best way to set the timing for the rings and the text - should this be done with javascript or CSS animation keyframes? Below is a link to my codepen and HTML/CSS.
Codepen - https://codepen.io/pizzapgh/pen/RygPQJ
body {
background-color: gray;
}
#circles {
width: 1000px;
height: 1000px;
display: inline-block;
position: relative;
margin: auto;
border: 1px solid blue;
}
#circles div {
position: absolute;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
width: 0;
height: 0;
opacity: 0;
animation-name: growCircles;
animation-duration: 8s;
transition-timing-function: ease-out;
animation-iteration-count: infinite;
}
#circles div:nth-child(1) {
animation-delay: 0s;
}
#circles div:nth-child(2) {
animation-delay: 1s;
}
#circles div:nth-child(3) {
animation-delay: 2s;
}
#circles div:nth-child(4) {
animation-delay: 3s;
}
#circles div:nth-child(5) {
animation-delay: 4s;
}
#circles div:nth-child(6) {
animation-delay: 5s;
}
#keyframes growCircles {
0% {
top: 500px;
left: 500px;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
}
100% {
opacity: 0;
}
}
/*================================
Text Transition
================================== */
#spin:after {
content: "";
animation: spin 5s ease-in infinite;
}
#keyframes spin {
0% {
content: "From The Classroom";
}
60% {
content: "To the City";
}
100% {
content: "To the World";
}
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
color: white;
width: 500px;
overflow: hidden;
text-align: center;
font-family: 'RockwellMT' !important;
}
<div class="circle-container">
<div id="circles">
<h2 id="spin"></h2>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

Safari not always firing animationend with chained animation

I dont know what im doin wrong here.
My animation worked fine till last days. After debugging ive seen the animationend event is not getting fired on my last two animations in the chain.
Fiddle here: https://jsfiddle.net/bn1krph7/
<div class="welcome-container"><div class="welcome-logo"><img src="https://placehold.it/250x250" class="welcome-avatar"></div><div class="welcome-title-container"><span class="welcome-title">Welcome, </span><span class="welcome-user">User!</span></div></div>
$(function() {
var container = $('.welcome-container');
var logo = document.querySelector('.welcome-logo');
logo.addEventListener('animationend', function(e) {
console.log(e.animationName);
}, false);;
setTimeout(function() {
container.addClass('visible');
}, 1000)
});
html, body {
height: 100%;
width: 100%;
}
.welcome-container {
opacity: 0;
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
&.visible {
transition-property: opacity;
transition-duration: 450ms;
opacity: 1;
display: block;
z-index: 1;
}
}
.welcome-logo, .welcome-title-container {
position: relative;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
.welcome-logo {
overflow: hidden;
border-radius: 50%;
border: 16px solid #434c53;
background-color: #ffffff;
transform-origin: center center;
width: 126px;
height: 126px;
transform: translate3d(-50%, 0, 0) scale(0.17);
top: 8.4%;
}
.welcome-avatar {
width: 100%;
height: 100%;
display: block;
opacity: 0;
}
.welcome-user {
opacity: 0;
color: #434c53;
}
.welcome-title {
opacity: 0;
color: #6D7579;
}
.welcome-title-container {
position: absolute;
font-size: 15px;
top: 63.3%;
}
.welcome-container.visible {
.welcome-logo {
animation-fill-mode: forwards;
animation-duration: .6s, .2s, .3s, .1s, .1s, .3s;
animation-name: logoMoveDown, logoSmall1, logoBig1, logoNormal, logoBig2, logoFadeOut;
animation-delay: 0s, 0.1s, 0.3s, 0.6s, 3.1s, 3.2s;
}
.welcome-avatar {
animation-fill-mode: forwards;
animation-duration: .2s;
animation-name: fade-in;
animation-delay: 0.3s;
}
.welcome-user {
animation-fill-mode: forwards;
animation-duration: 1s, .3s;
animation-name: fade-in, fade-out;
animation-delay: 1s, 3.2s;
}
.welcome-title {
animation-fill-mode: forwards;
animation-duration: 1s, .3s;
animation-name: fade-in, fade-out;
animation-delay: 0.8s, 3.2s;
}
}
#keyframes logoMoveDown {
from{
top: 8.4%;
}
to {
top: 39%;
}
}
#keyframes logoSmall1 {
from {
transform: translate3d(-50%, 0, 0) scale(0.17);
}
to {
transform: translate3d(-50%, 0, 0) scale(0.1);
}
}
#keyframes logoBig1 {
0% {
transform: translate3d(-50%, 0, 0) scale(0.1);
border-width: 16px;
}
50% {
border-width: 3px;
}
100% {
transform: translate3d(-50%, 0, 0) scale(1.2);
border-width: 3px;
}
}
#keyframes logoNormal {
from {
transform: translate3d(-50%, 0, 0) scale(1.2);
}
to {
transform: translate3d(-50%, 0, 0) scale(1);
}
}
#keyframes logoBig2 {
from {
transform: translate3d(-50%, 0, 0) scale(1);
}
to {
transform: translate3d(-50%, 0, 0) scale(1.2);
}
}
#keyframes logoFadeOut {
0% {
transform: translate3d(-50%, 0, 0) scale(1.2);
opacity: 1;
}
100% {
transform: translate3d(-50%, 0, 0) scale(0.2);
opacity: 0;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Chrome is working fine. Safari (9.1.2) doesnt work!
Another funny issue ive found: With alt+tab out and back in the animation will get called to end aslong there is no iframe usage. So you cant see in the fiddle demo.