how to add loading.. on ajax response

how to add loading.. on ajax response - javascript

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>

Related

Adapting image gallery code snippet to Django project

I'm building a website using Django and I want to add this image gallery to one of my pages, but I'm having issues integrating the code.
The HTML, SCSS, and JS code I want to add is here:
https://gist.github.com/CodeMyUI/9769b75c7a81d24138ae74bdbadc39e4 and I've added the code snippets below.
I've added the JS (inside a <script> element) and HTML to my django template. I've added a Django-SASS processor to my project to handle the SCSS, following these steps (https://engineertodeveloper.com/how-to-easily-use-sass-scss-with-django/). I'm trying to change the SCSS to use my images, so I modified the background-image property in the SCSS from
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-#{$i + 3}.jpg');
to
background-image: url("BHM_bike.png"), url("BHM_bike.png"), url("BHM_bike.png");
So that the resulting block looks like this:
#for $i from 0 to $numOfEls {
&:nth-child(#{$i + 1}) {
$x: (100% + $elMrgRel) * $i;
transform: translate3d($x,0,0);
transform-origin: $x + 50% 50%;
#include contElActive {
&:not(.s--active) {
transform: scale(0.5) translate3d($x,0,0);
opacity: 0;
transition: transform $fadeoutAT, opacity $fadeoutAT;
}
}
.el__inner {
transition-delay: $initDelayStep * $i;
}
.el__bg {
transform: translate3d($elW * $i * -1,0,0);
&:before {
transition-delay: 0.1s * $i;
background-image: url("BHM_bike.png"), url("BHM_bike.png"), url("BHM_bike.png");
}
}
}
I'm not getting any images loading though.
var $cont = document.querySelector('.cont');
var $elsArr = [].slice.call(document.querySelectorAll('.el'));
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));
setTimeout(function() {
$cont.classList.remove('s--inactive');
}, 200);
$elsArr.forEach(function($el) {
$el.addEventListener('click', function() {
if (this.classList.contains('s--active')) return;
$cont.classList.add('s--el-active');
this.classList.add('s--active');
});
});
$closeBtnsArr.forEach(function($btn) {
$btn.addEventListener('click', function(e) {
e.stopPropagation();
$cont.classList.remove('s--el-active');
document.querySelector('.el.s--active').classList.remove('s--active');
});
});
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #008000;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
$vertPad: 80px;
$sidePad: 70px;
$numOfEls: 3;
$elMrg: 1%;
$initAT: 1s;
$initDelayStep: 0.1s;
$fullInitAT: $initAT + $initDelayStep * ($numOfEls - 1);
$moveAT: 0.6s;
$expandAT: 0.7s;
$expandDelay: 0.1s;
$bgScaleAT: 0.8s;
$fadeoutAT: $moveAT + $expandAT/2;
$indexHoverAT: 0.5s;
$closeBtnAT: 0.3s;
$closeBtnLineDelay: 0.15s;
$fullExpandAT: $moveAT + $expandDelay + $expandAT;
$contentFadeinAT: 0.5s;
#mixin elHover {
.el:hover & {
#content;
}
}
#mixin elActive {
.el.s--active & {
#content;
}
}
#mixin contInactive {
.cont.s--inactive & {
#content;
}
}
#mixin contElActive {
.cont.s--el-active & {
#content;
}
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: $vertPad $sidePad;
&__inner {
position: relative;
height: 100%;
&:hover .el__bg:after {
opacity: 1;
}
}
}
.el {
$elW: (100% - $elMrg * ($numOfEls - 1)) / $numOfEls;
$elMrgRel: percentage($elMrg / $elW);
position: absolute;
left: 0;
top: 0;
width: $elW;
height: 100%;
background: #252525;
transition: transform $moveAT $expandAT, width $expandAT, opacity $moveAT $expandAT, z-index 0s $moveAT + $expandAT;
will-change: transform, width, opacity;
&:not(.s--active) {
cursor: pointer;
}
&__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
&__inner {
overflow: hidden;
position: relative;
height: 100%;
transition: transform $initAT;
#include contInactive {
transform: translate3d(0,100%,0);
}
}
&__bg {
position: relative;
width: calc(100vw - #{$sidePad * 2});
height: 100%;
transition: transform $moveAT $expandAT;
will-change: transform;
&:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
transition: transform $initAT;
transform: translate3d(0,0,0) scale(1);
#include contInactive {
transform: translate3d(0,-100%,0) scale(1.2);
}
#include elActive {
transition: transform $bgScaleAT;
}
}
&:after {
$opacityAT: 0.5s;
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
opacity: 0;
transition: opacity $opacityAT;
#include contElActive {
transition: opacity $opacityAT $fullExpandAT;
opacity: 1 !important;
}
}
}
&__preview-cont {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 0.3s $fullInitAT - 0.2s;
#include contInactive {
opacity: 0;
transform: translateY(10px);
}
#include contElActive {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
}
&__heading {
color: #fff;
text-transform: uppercase;
font-size: 18px;
}
&__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.1s;
#include elActive {
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: all $contentFadeinAT $fullExpandAT;
}
}
&__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
&__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
transition: all 0s $closeBtnAT + $closeBtnLineDelay;
cursor: pointer;
#include elActive {
z-index: 5;
opacity: 1;
pointer-events: auto;
transition: all 0s $fullExpandAT;
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
transition: opacity 0s;
#include elActive {
opacity: 1;
}
}
&:before {
transform: rotate(45deg) translateX(100%);
#include elActive {
transition: all $closeBtnAT $fullExpandAT cubic-bezier(.72,.09,.32,1.57);
transform: rotate(45deg) translateX(0);
}
}
&:after {
transform: rotate(-45deg) translateX(100%);
#include elActive {
transition: all $closeBtnAT $fullExpandAT + $closeBtnLineDelay cubic-bezier(.72,.09,.32,1.57);
transform: rotate(-45deg) translateX(0);
}
}
}
&__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: $vertPad * -1;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 100vw / $numOfEls;
line-height: 0.85;
font-weight: bold;
transition: transform $indexHoverAT, opacity $moveAT/2 $expandAT + $expandDelay + $moveAT;
transform: translate3d(0,1vw,0);
#include elHover {
transform: translate3d(0,0,0);
}
#include contElActive {
transition: transform $indexHoverAT, opacity $moveAT/2;
opacity: 0;
}
&-back,
&-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
&-back {
color: #2f3840;
opacity: 0;
transition: opacity $indexHoverAT/2 $indexHoverAT/2;
#include elHover {
transition: opacity $indexHoverAT/2;
opacity: 1;
}
}
&-overlay {
overflow: hidden;
position: relative;
transform: translate3d(0,100%,0);
transition: transform $indexHoverAT 0.1s;
color: transparent;
&:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #fff;
transform: translate3d(0,-100%,0);
transition: transform $indexHoverAT 0.1s;
}
#include elHover {
transform: translate3d(0,0,0);
&:before {
transform: translate3d(0,0,0);
}
}
}
}
#for $i from 0 to $numOfEls {
&:nth-child(#{$i + 1}) {
$x: (100% + $elMrgRel) * $i;
transform: translate3d($x,0,0);
transform-origin: $x + 50% 50%;
#include contElActive {
&:not(.s--active) {
transform: scale(0.5) translate3d($x,0,0);
opacity: 0;
transition: transform $fadeoutAT, opacity $fadeoutAT;
}
}
.el__inner {
transition-delay: $initDelayStep * $i;
}
.el__bg {
transform: translate3d($elW * $i * -1,0,0);
&:before {
transition-delay: 0.1s * $i;
background-image: url("BHM_bike.png"), url("BHM_bike.png"), url("BHM_bike.png");
}
}
}
}
&:hover {
.el__bg:after {
opacity: 0;
}
}
&.s--active {
z-index: 1;
width: 100%;
transform: translate3d(0,0,0);
transition: transform $moveAT, width $expandAT $moveAT + $expandDelay, z-index 0s;
.el__bg {
transform: translate3d(0,0,0);
transition: transform $moveAT;
&:before {
transition-delay: $moveAT;
transform: scale(1.1);
}
}
}
}
.icon-link {
position: absolute;
left: 5px;
bottom: 5px;
width: 32px;
img {
width: 100%;
vertical-align: top;
}
&--twitter {
left: auto;
right: 5px;
}
}
{% extends './base.html' %}
{% load sass_tags %}
{% load static %}
{% load fullcalendar_tags %}
{% block content %}
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="{% static 'BobbleHead/images/BHM_bike.png' %}" alt="BHBike" width="1500" height="700">
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>BobbleHeadMoto</b></span></h1>
</div>
</header>
<div class="w3-container w3-content w3-center w3-padding-32" style="max-width:800px">
<!-- Packages and Pricing Section -->
<div id="packages">
<h2 class="w3-wide">Packages & Pricing</h2>
<div class="cont s--inactive">
<!-- cont inner start -->
<div class="cont__inner">
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading">Section 1</h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">1</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="1">1</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading">Section 2</h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">2</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="2">2</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading">Section 3</h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">3</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="3">3</div>
</div>
</div>
</div>
<!-- el end -->
</div>
<!-- cont inner end -->
</div>
</div>
</div>
<!-- End page content -->
{% endblock %}

How to prevent an animated icon from bleeding out from within an input box

I have an input field with a search Icon inside. When the user clicks inside the input field the Icon fades out to the left, in doing so, it bleeds out of the input box.
Is there a way to prevent the search Icon from bleeding out? I don't want the Icon to be visible past the border of the input box.
cshtml page:
<header>
<nav id="navBar" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="search-bar center">
<img id="searchIcon" src="https://svgur.com/i/XUB.svg" class="icon search-icon" />
<input id="searchBox" class="input-text" placeholder="Find games for sale" type="text">
</div>
</nav>
</header>
js:
$('#searchBox').on({
focus: function () {
document.getElementById("searchIcon").classList.remove("fadeRightSearchIcon");
document.getElementById("searchIcon").classList.add("fadeLeftSearchIcon");
},
blur: function () {
document.getElementById("searchIcon").classList.remove("fadeLeftSearchIcon");
document.getElementById("searchIcon").classList.add("fadeRightSearchIcon");
}
});
css:
.search-bar {
position: relative;
}
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
.icon {
position: absolute;
top: -2px;
left: 0;
padding: 13px 15px 13px 11px;
}
.search-icon {
width: 50px;
height: auto;
}
.search-bar .input-text {
height: 45px;
padding: 8px 6px 8px 40px;
max-width: 200%;
border-radius: 25px;
outline: none !important;
border: 2px solid;
width: 550px;
transition-property: padding;
transition-duration: 0.5s;
}
.input-text:active, .input-text:focus {
padding: 8px 6px 8px 15px;
}
.fadeLeftSearchIcon {
animation-name: fadeInLeft;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.fadeRightSearchIcon {
animation-name: fadeInRight;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.center {
margin: 0 auto;
text-align: center;
display: inline-block;
top: 0;
bottom: 0;
}

Try to change to -25% ,check official site:
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
Result:

How to stop loading animation after 2 seconds?

I want to make a loading screen and a fading up page like here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5. The problem is that I don't know how to end the loading loop and make that fading.
Codes
<body>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</body>
body {
background-color: #636e72;
}sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
#keyframes sk-chase {
100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}

You need the JavaScript that tells the browser when to hide the loader and show the content. See snippet below
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.querySelector("#loader").style.display = "none";
document.querySelector("#myDiv").style.display = "block";
document.querySelector("body").style.backgroundColor = "white";
}
body {
background-color: #636e72;
}
.sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: calc(50% - 20px);
left: calc(50% - 20px);
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
#keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1.0);
}
}
<body onload="myFunction()">
<div id="loader" class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
</body>

animation: sk-chase 2.5s infinite linear both;
Word infinite is your problem. Use a number of reps instead infinite. In your case is 1.

Delay on keyframe animation

I want to had a delay with a keyframe animation, but it doesn't work.
It's a div with an opacity animation on a click button. The problem is that the opacity is 100% before the animation start.
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
opacity: 1;
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Here's MY JSFIDDLE with a problem.

Use transition instead of animation and you will also have an easier code:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$(this).text("Open ↓");
} else {
$(this).text("Close ↑");
}
$('div.box').toggleClass('In');
$(this).toggleClass("clicked");
});
body {
text-align: center
}
div.box {
display: inline-block;
background: pink;
height: 0;
width: 300px;
opacity: 0;
transition: .8s .3s;
}
button {
font-size: 16px;
}
div.In {
opacity: 1;
height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div class="box"> </div>
Considering your code you may correct it like this:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
/* opacity:0; removed*/
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
opacity:1;
height:300px; /*Added this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </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>

We Keep Coding

JavaScript is the programming language of the Web.

how to add loading.. on ajax response - javascript

Related

Adapting image gallery code snippet to Django project

How to prevent an animated icon from bleeding out from within an input box

How to stop loading animation after 2 seconds?

Delay on keyframe animation

Timing text transition with pulsating rings

Categories

Resources