progress bar only works on page load/reload only

progress bar only works on page load/reload only - javascript

Disclaimer: Tis code is taken from this jsfiddle
I want to have youtube.com like progressbar, I have tried in this way
$('#search').click(function(){
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
}
});
});
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: #b91f1f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity: 0
}
#progress dd,#progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #b91f1f 1px 0 6px 1px;
-ms-box-shadow: #b91f1f 1px 0 6px 1px;
-webkit-box-shadow: #b91f1f 1px 0 6px 1px;
box-shadow: #b91f1f 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%
}
#progress dd {
opacity: 1;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px)
}
#progress dt {
opacity: 1;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px)
}
#-moz-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-ms-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#-o-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-webkit-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>
<input type="submit" id="search" value="Search" />
but it only works one time after page is loaded, I want this must work when ever I click Search button.

Just remove the done class from your progress div before starting new.
$("#progress").removeClass("done");
Its a litte more difficult to avoid the progress bar to first move back after starting new. First reset the width of it to 0, directly after adding done:
$("#progress").addClass("done").css('width', 0);
Due to the opacity transition, there is still some milliseconds when the bar going back to zero width is visible. So I ended up with simply hiding it (which sets its display property).
Here's the complete code:
$('#search').click(function(){
$("#progress").removeClass("done").show();
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done").hide();
}
},
complete: function() {
}
});
});

Try this: (I added comments on what I changed)
$('#search').click(function(){
$("#progress").removeClass("done");
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
if(_percent == 105) {
$('#progress').hide(); //make it invisible
$('#progress').css('width', "0%"); //Reset to 0
}else{
$('#progress').show(); //show it.
$('#progress').css('width', _percent+"%"); //progress
}
},
complete: function() {
}
});
});
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: #b91f1f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity: 0
}
#progress dd,#progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #b91f1f 1px 0 6px 1px;
-ms-box-shadow: #b91f1f 1px 0 6px 1px;
-webkit-box-shadow: #b91f1f 1px 0 6px 1px;
box-shadow: #b91f1f 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%
}
#progress dd {
opacity: 1;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px)
}
#progress dt {
opacity: 1;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px)
}
#-moz-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-ms-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#-o-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#-webkit-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
#keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>
<input type="submit" id="search" value="Search" />

Related

css preloader loads but not act as preloader. appears after footer

css based preloder is loads in the footer of page. not acting like preloader. seems code conflict or i missed some code. short clip of preloader https://www.awesomescreenshot.com/video/9880883?key=061bd162c59b4bcee2a76cd33f73cea3
// placed in head section of worpress
<div class="cssload-container">
<div class="cssload-item cssload-ventilator"></div>
</div>
//placed in body dection
<script>window.addEventListener("load", function () {
const cssload-container = document.querySelector(".cssload-container");
cssload-container.className += " hidden"; // class "cssload-container hidden"
}); </script>
plced in css section
.cssload-container {
position: relative;
width: 195px;
height: 224px;
overflow: hidden;
margin:0px auto;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 49px;
height: 49px;
background-color: rgb(1,1,44);
box-shadow: 0 0 8px 1px rgba(219,14,181,0.57);
}
.cssload-container .cssload-ventilator {
width: 24px;
height: 24px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: cssload-spin 1.3s ease-in-out infinite reverse;
-o-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-ms-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-webkit-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-moz-animation: cssload-spin 1.3s ease-in-out infinite reverse;
transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-ms-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
-moz-transition: all 0.26s ease;
}
.cssload-container .cssload-ventilator:before, .cssload-container .cssload-ventilator:after {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(219,14,181);
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-o-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-ms-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-webkit-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-moz-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
animation: cssload-shapeit 0.65s ease infinite alternate;
-o-animation: cssload-shapeit 0.65s ease infinite alternate;
-ms-animation: cssload-shapeit 0.65s ease infinite alternate;
-webkit-animation: cssload-shapeit 0.65s ease infinite alternate;
-moz-animation: cssload-shapeit 0.65s ease infinite alternate;
transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-ms-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
-moz-transition: all 0.26s ease;
content: '';
}
.cssload-container .cssload-ventilator:before {
left: -125%;
border-left: 2px solid rgb(1,1,44);
}
.cssload-container .cssload-ventilator:after {
right: -125%;
border-right: 2px solid rgb(1,1,44);
}
#keyframes cssload-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes cssload-spin {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes cssload-spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes cssload-spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-o-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-ms-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-webkit-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-moz-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
.cssload-container.hidden {
animation: fadeOut .05s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
100% {
opacity: 0;
visibility: hidden;
i am using divi theme in wordpress which allow to paste code in sections as commented.
kindly suggest the solution.

How do I refresh a DIV content every 30 seconds?

I am trying to refresh a certain div to refresh every 30 seconds. There are others div's on my HTML page, but they do not need to refresh.
The idea is to reload/refresh the div itself.
I have tried this script, but can not get it to work.
Here is my HTML and Javascript code
The path in my html file is
<link rel="stylesheet" href="./difcol.css" type="text/css" media="screen">
Here are my css file for refresh.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("refresh").load(window.location.href + " refresh");
}, 30000);
});
</script>
<div id="refresh" class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">1</h2>
<h2 class="frame-2">2</h2>
<h2 class="frame-3">3</h2>
<h2 class="frame-4">4</h2>
<h2 class="frame-5">5</h2>
<h2 class="frame-6">6</h2>
<h2 class="frame-7">
<span>a,</span>
<span>b,</span>
<span>c</span>
</h2>
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Barlow');
body {
background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Barlow', sans-serif;
}
.container {
width: 100%;
position: relative;
overflow: hidden;
}
a {
text-decoration: none;
}
h1.main, p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 90px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
font-size: 200px;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {
font-size: 200px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-3 {
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-5 {
font-size: 200px;
-webkit-animation-delay: 12s;
-moz-animation-delay:12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-container h2.frame-6 {
font-size: 200px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
.sp-container h2.frame-7 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span {
-webkit-animation: blurFadeIn 3s ease-in 18s backwards;
-moz-animation: blurFadeIn 1s ease-in 18s backwards;
-ms-animation: blurFadeIn 3s ease-in 18s backwards;
animation: blurFadeIn 3s ease-in 18s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span:nth-child(2) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
}
.sp-container h2.frame-7 span:nth-child(3) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
/* background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;*/
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 0.4;
-webkit-transform: scale(2);
}
100% {
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 0.4;
-moz-transform: scale(2);
}
100% {
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate {
0% {
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 0.4;
transform: scale(2);
}
100% {
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate {
0% {
opacity: 0;
transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}

You're lacking # in $("refresh") for referring to refresh id. The change should be
$("#refresh").load(window.location.href + " refresh");
Note that I reduced the interval time to 1 second and put a log to show differences
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("#refresh").load(window.location.href + " refresh", function() { console.log("loaded") });
}, 1000);
});
</script>
<div id="refresh" class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">1</h2>
<h2 class="frame-2">2</h2>
<h2 class="frame-3">3</h2>
<h2 class="frame-4">4</h2>
<h2 class="frame-5">5</h2>
<h2 class="frame-6">6</h2>
<h2 class="frame-7">
<span>a,</span>
<span>b,</span>
<span>c</span>
</h2>
</div>
</div>

You can put the contents of the div in a javascript variable once the page loads
then in your set interval function:
document.getElementById('refresh').innerHTML = x; :
<head>
<script>
var x = document.getElementById('refresh').innerHTML;
setInterval(function() {
document.getElementById('refresh').innerHTML = x;
}, 30000);
</script>
</head>

Controlling CSS animation counts form input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have been trying to control the rate of drops per minute. is it possible to control the rate of drops depending on the Drops in each minute: input? Like when the input value is 60, there will be 60 water drops in each minute (animation: drop 1s). What would be best way to achieve that?
Thanks in advance for your suggestion.
Fiddle link to the code is here.
body {
background: #e8e5ea;
}
.wrap {
position: absolute;
width: 100px;
height: 200px;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -100px;
}
.drop {
width: 40px;
height: 40px;
left: 50%;
margin-left: -20px;
position: absolute;
animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}
.drop circle {
fill: #2a96ed;
}
.drop-outer {
position: absolute;
box-sizing: border-box;
/* border: 1px solid #333; */
width: 100px;
height: 200px;
overflow: hidden;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
background-clip: padding-box;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.ripple {
position: absolute;
box-sizing: border-box;
width: 240px;
height: 240px;
top: 68px;
left: -70px;
perspective: 100;
transform: rotateX(65deg);
}
.ripple .ripple-svg {
position: absolute;
width: 240px;
height: 240px;
opacity: 0;
}
.ripple .ripple-svg circle {
fill: none;
stroke: #2a96ed;
stroke-width: 10px;
stroke-alignment: inner;
}
.ripple-1 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-1 .ripple-svg {
animation: fade-in-out 2s linear 0s infinite;
}
.ripple-1 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-2 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-2 .ripple-svg {
animation: fade-in-out 2s linear 0.2s infinite;
}
.ripple-2 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-3 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
.ripple-3 .ripple-svg {
animation: fade-in-out 2s linear 0.35s infinite;
}
.ripple-3 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
#keyframes drop {
0% {
transform: scale3d(0.01,0.01,0.01) translateY(0)
}
10% {
transform: scale3d(1,1,1)
}
44% {
transform: scale3d(1,1,1) translateY(200px)
}
100% {
transform: scale3d(1,1,1) translateY(200px)
}
}
#keyframes fade-in-out {
0% {opacity: 0}
42% {opacity: 0}
52% {opacity: 1}
65% {opacity: 1}
100% {opacity: 0}
}
#keyframes ripple {
0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}
#keyframes border {
0% { stroke-width: 6px }
42% { stroke-width: 6px }
100% {stroke-width: 2px }
}
Drops in each minute: <input type="number" id="number"/><br>
<div class="wrap">
<div class="drop-outer">
<svg class="drop" viewBox="0 0 40 40" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20"/>
</svg>
</div>
<div class="ripple ripple-1">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-2">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-3">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
</div>

Only if you specify the relevant styles via JavaScript.
Your example is rather complex and not really minimal, so here is a simplified example that shows the idea:
const animateInner = document.querySelector('#animate .inner');
const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', function() {
console.log('update to', `${input.value || 0}s`);
animateInner.style.animationDuration = `${input.value || 0}s`;
});
#animate {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#animate .inner {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #F00;
animation-name: fill;
animation-iteration-count: infinite;
}
#keyframes fill {
from {
top: 100%;
}
to {
top: 0;
}
}
<label>Duration in seconds: <input /></label>
<button>Update</button>
<div id="animate"><div class="inner"></div></div>
In a nutshell, you're going to want to control the "animation-duration" property. This will affect how quickly it happens. Since you want "drops per minute", you'll have to do a little math to convert that to a duration.
Since it looks like your animation has several things working in unison, you'll want to update them all at the same time.

So you can use
animation-iteration-count CSS3 property, the secret is you get the number and update the css
$(function(){
$('#number').on('change', function(){
var count = $(this).val();
$('.drop').css('animation-iteration-count', count);
$('.ripple-1').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-2').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-3').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg circle').css('animation-iteration-count', count);
});
});
JSfiddle

On click trigger not keeping full animation

I am triggering an svg checmark with a button. The way I am doing it is setting the checkmark to opacity:0; and then once the button is clicked, adding a class fadeIn and putting the opacity to opacity:1;.
My issue is when the opacity is set to 0 the animation is altered. The full animation isn't showing. You can see this by taking the opacity:0 out of the chechmark class and running the fiddle again.
My question is, how can I get this checkmark to trigger/display with the button while keeping the full animation sequence.
Here is a fiddle. The snippet isn't producing the checkmark, not sure why.
$('#trigger').on('click', function () {
$('.checkmark').addClass('fadeIn');
});
.checkmark {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #0783a7;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
opacity: 0;
z-index: 2;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 10;
stroke: #0783a7;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 70;
stroke-dashoffset: 70;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #0783a7;
}
}
.fadeIn {
opacity: 1;
transition: all 0.8s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="trigger">Trigger</button>
<div id="wrap">
<div id="checkmark-text">All Templates Selected</div>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</div>

You can fix this by running the animation rule on the required elements based on the addition of the .fadeIn class instead of placing it on the classes the elements have when they load. Try this:
.checkmark {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #0783a7;
z-index: 2;
opacity: 0;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 10;
stroke: #0783a7;
fill: none;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 70;
stroke-dashoffset: 70;
}
.checkmark.fadeIn {
opacity: 1;
transition: all 0.8s ease;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark.fadeIn .checkmark-circle {
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark.fadeIn .checkmark-check {
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #0783a7;
}
}
Updated fiddle

Trigger same CSS animation on every click

I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.
Here's my pen.
http://codepen.io/omarel/pen/JRwpZp
HTML :
click me
Jquery :
$('.addtocart').click(function () {
$(this).addClass('on');
});
CSS :
.addtocart {
position: relative;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform: translateY(-100%);
}
10% {
transform: translateY(-100%);
}
15% {
transform: translateY(0);
}
30% {
transform: translateY(-50%);
}
40% {
transform: translateY(0%);
}
100% {
opacity: 1;
}
}

You can listen to when the animation ends, then remove the class 'on'
var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one(animationEvent, function(event) {
$(this).removeClass('on')
});
});
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(this).removeClass('on')
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

Instead of using an on click event, use :focus.
.addtocart:focus {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
Now, whenever an element with the .addtocart class is focused (or clicked on), it will have those styles. When you click away, the styles will go away.

You could use the .delay() and .queue()/dequeue() if you want to add/remove class :
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
Hope this helps.
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

You can add and remove the css class on every click and inorder for you to run the css only while clicking, do this onload not on ready
Example
.addClass and .removeClass

I have a solution to remove your on class every second:
var $post = $(".addtocart");
setInterval(function() {
$post.removeClass("on");
}, 1000);
http://codepen.io/anon/pen/NRZykG

As Jacob said there is no need for javascript.
You can use CSS :focus or :target as in this codepen https://codepen.io/sebilasse/pen/rrOYQj?editors=1100
-
.root {
appearance: none;
position: relative;
width: 120px;
height: 50px;
transition: all .1s linear;
transform: translate3d(0, 0, 0);
}
.animation {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
outline: none;
}
#keyframes pulse {
0% { opacity: 0; box-shadow: 0 0 0 1px red; }
40% { opacity: 0.8; }
80% { box-shadow: 0 0 0 80px red; }
99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}
.root:hover ._focus:focus::after,
.root:target ._target::after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 4px;
box-shadow: 0 0 0 0px red;
border-radius: 50%;
z-index: 1;
left: 20px;
top: 25px;
transform: perspective(1px) translate(-50%, -50%);
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
<div class="animation _focus" tabindex="0" onanimationend="this.blur()">
</div>
contra: steals focus
</button>
<button id="btn_1" class="root">
<a class="animation _target" href="#btn_1"></a>
contra: needs id
</button>

Develop Reference

JavaScript is the programming language of the Web.

progress bar only works on page load/reload only - javascript

Related

css preloader loads but not act as preloader. appears after footer

How do I refresh a DIV content every 30 seconds?

Controlling CSS animation counts form input [closed]

On click trigger not keeping full animation

Trigger same CSS animation on every click

Categories

Resources