Pause / re-initiate progressbar? Javascript and animationPlayState - javascript

I got myself a simple script that creates a progressbar which runs for 180 seconds. After that time the progressbar sends the browser to another website. View / run the code below.
I added an onclick event to the progress bar for testing purposes.
What I want; I want to be able to pause, reset and set a new running-time value.
I tried using document.getElementById('progressbar1').style.animationPlayState = 'paused'; to pause the progressbar, but unfortunately nothing is happening.
Do you guys have any clue on how to pause the progressbar?
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>

You are selecting the wrong element to stop the animation!
The animation is running on #progressbar1 .inner
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').getElementsByClassName('inner')[0].style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>

Related

animate when changing an property from JavaScript css

If I try this code I just wrote:
function changeBackgroundColor() {
const clickingDiv = document.getElementById("test");
clickingDiv.style.setProperty("--primary-color-new", "#3474A7");
clickingDiv.style.setProperty("--secondary-color-new", "#ffd340");
clickingDiv.style.animation = "change-background 1s";
clickingDiv.classList.add("change-bg");
setTimeout(() => {
clickingDiv.style.setProperty("--primary-color", "#3474A7");
clickingDiv.style.setProperty("--secondary-color", "#ffd340");
clickingDiv.style.animation = "";
clickingDiv.classList.remove("change-bg");
}, 1000);
}
#keyframes change-background {
from {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}
to {
background: linear-gradient(to right, var(--primary-color-new), var(--secondary-color-new));
}
}
#test {
width: 500px;
height: 500px;
}
.change-bg {
animation-name: change-background;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-timing-function: ease;
}
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
<button onclick="changeBackgroundColor()">click me</button>
</div>
the animation don't work and it directly switch from the first color to the other. (Normally I retrieve the color from an API)
I would want to do a transition between the 2 values
I found out that linear-gradient transition / animation doesn't work. To fix this error I just used a wrapper with the opacity like this so here's the modified code:
function changeBackgroundColor() {
const wrapper = document.getElementById("wrapper");
const element = document.getElementById("test");
if (!wrapper.classList.contains("wrapper-moving")) {
wrapper.classList.add("wrapper-moving");
wrapper.style.setProperty("--new-primary-color", "#2568f6");
wrapper.style.setProperty("--new-secondary-color", "#804cda");
setTimeout(() => {
element.style.setProperty("--primary-color", "#2568f6");
element.style.setProperty("--secondary-color", "#804cda");
wrapper.classList.remove("wrapper-moving");
}, 1000);
}
}
#test {
width: 500px;
height: 500px;
background: linear-gradient(to right, #3474A7, #ffd340);
z-index: 1;
}
.wrapper {
z-index:-1;
height: 600px;
width: 600px;
position: absolute;
transition: all 1s;
background: linear-gradient(to right, var(--new-primary-color), var(--new-secondary-color));
}
.wrapper:not(.wrapper.wrapper-moving) {
opacity: 0;
}
.wrapper.wrapper-moving {
opacity: 1;
}
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
<div id="wrapper" class="wrapper"></div>
<button onclick="changeBackgroundColor()">click me</button>
</div>
(I couldn't get it to work properly in my case but it is the answer)

How to improve loading animation type?

I am making a loading animation and now I am having a loading animation circle type below :
var waitingMask = {
show: function() {
var body = $('body');
var static_pos;
var spinner = body.children('.spinner');
if (spinner.length && !spinner.hasClass('spinner-remove')) return null;
!spinner.length && (spinner = $('<div class="spinner' + (static_pos ? '' : ' spinner-absolute') + '"/>').appendTo(body));
animateSpinner(spinner, 'add');
body.addClass("spinner-fade");
},
hide: function() {
var body = $('body');
var complete;
var spinner = body.children('.spinner');
spinner.length && animateSpinner(spinner, 'remove', complete);
body.removeClass("spinner-fade");
}
}
function animateSpinner(el, animation, complete) {
if (el.data('animating')) {
el.removeClass(el.data('animating')).data('animating', null);
el.data('animationTimeout') && clearTimeout(el.data('animationTimeout'));
}
el.addClass('spinner-' + animation).data('animating', 'spinner-' + animation);
el.data('animationTimeout', setTimeout(function() {
animation == 'remove' && el.remove();
complete && complete();
}, parseFloat(el.css('animation-duration')) * 1000));
}
function showLoading() {
return waitingMask.show();
}
function hideLoading() {
return waitingMask.hide();
}
/* The spinner */
#keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner,
.spinner:before {
width: 80px;
height: 80px;
box-sizing: border-box;
}
.spinner:before {
content: '';
display: block;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner .6s linear infinite;
}
.spinner-absolute {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
/* Animations */
.spinner-add,
.spinner-remove {
animation-fill-mode: both;
animation-duration: .4s;
}
.spinner-add {
animation-name: spinner-add;
}
#keyframes spinner-add {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.spinner-remove {
animation-name: spinner-remove;
}
#keyframes spinner-remove {
to {
transform: scale(0);
}
}
.spinner-fade {
content: '';
display: block;
/* position: fixed; */
top: 0;
/* bottom: 0; */
left: 0;
/* right: 0; */
width: 100%;
height: 100%;
background-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
ABC
</h1>
<button onclick="showLoading()">Add Spinner</button>
<button onclick="hideLoading()">Remove Spinner</button>
jsfiddle
But I want to improve my to circle loading to floating bar loading like below:
Anyone can give me a solution for my problem?
Thanks.

CSS Transition Triggered by JavaScript

I want to have the following JavaScript function to transition function between from have none display to block when generate_loading_screen() is called to to when it finishes transition between display block to none. How do I do this?
function generate_loading_screen() {
window.setInterval(function(){
if (progress_percent < 75) {
document.getElementById("loading_screen").style.display = "block";
document.getElementById("body_of").style.filter = "grayscale(1)";
}
else {
document.getElementById("loading_screen").style.display = "none";
document.getElementById("body_of").style.filter = "none";
stop_generating_loading();
}
}, 50);
};
function stop_generating_loading() {
clearInterval(generate_loading_screen);
};
.loading {
position: fixed;
border: 16px solid #dbdbdb;
border-radius: 50%;
border-top: 16px solid #53f442;
margin-left: 44%;
margin-top: 10%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loading" id="loading_screen" style="display: none;"></div>
Just extra info: progress_percent is a variable that determines how much of the rest of the web-app has loaded. The grayscale filter does not affect the whole page, just the ID body_of
Thanks in advance
Probably better to use a opacity transition by adding a class when your percent reaches 100.
Codepen for working example or see below.
HTML:
<div class="loading" id="loading_screen"></div>
CSS:
.loading {
position: fixed;
border: 16px solid #dbdbdb;
border-radius: 50%;
border-top: 16px solid #53f442;
margin-left: 44%;
margin-top: 10%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
opacity: 100%;
transition: opacity 1s ease-in-out;
}
.done_loading {
opacity: 0;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Javascript:
var progress_percent = 25;
var interval;
function generate_loading_screen() {
interval = window.setInterval(function(){
progress_percent += 1; //totest
if (progress_percent > 75) {
document.getElementById("loading_screen").className = "loading done_loading";
//stop_generating_loading();
}
//TESTING
if(progress_percent > 100){
console.log("Reached 100%");
document.getElementById("loading_screen").className = 'loading';
progress_percent = 0;
}
//
}, 50);
};
function stop_generating_loading() {
clearInterval(interval);
};
document.addEventListener('DOMContentLoaded', function(){
generate_loading_screen();
});
Remove all the testing code to get this to work once, you might need to add additional code for your body div. Let me know if you need me to add more to this example!
window.setInterval returns an intervalId which you need to cancel in order to stop the interval
let timer;
function generate_loading_screen() {
timer = window.setInterval(function(){
if (progress_percent < 75) {
document.getElementById("loading_screen").style.display = "block";
document.getElementById("body_of").style.filter = "grayscale(1)";
}
else {
document.getElementById("loading_screen").style.display = "none";
document.getElementById("body_of").style.filter = "none";
stop_generating_loading();
}
}, 50);
};
function stop_generating_loading() {
clearInterval(timer);
};

make sprite animation using javascript (every 5s)

i want to make my animation runs every 5sec using js
this is my html code
<div id="aa"></div>
and this is my css code
#aa{
width: 167px;
height: 169px;
background-image: url("sprite.png");
/*animation: play .2s steps(6) ;*/
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1002px; }
}
jsfiddle
You can play animation in class, then add and remove class of element every 5 second.
setInterval(function(){
$("div").addClass("play");
setTimeout(function(){
$("div").removeClass("play");
}, 1000);
}, 5000);
div {
width: 100px;
height: 100px;
background: green;
}
.play {
animation: play 1s;
}
#keyframes play {
0% { margin-left: 0px; }
50% { margin-left: 200px; }
100% { margin-left: 0px; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
It will look like:
function animation()
{
$('#overlay').fadeIn('slow').delay(1000).fadeOut('slow');
}
setInterval(animation,5000);
I made a sample for you, have a look: http://jsfiddle.net/xgnjy8st/
Does this suite you?
<div id="aa"></div>
#aa {
width: 167px;
height: 169px;
background-image: url("http://www.w3schools.com/cssref/pineapple.jpg");
animation: blinker 5s forwards infinite;
}
#keyframes blinker {
50% {
opacity: 0.0;
}
}
https://jsfiddle.net/65t0ye2m/
Or try this one out with js
var img = document.getElementById('aa');
var interval = window.setInterval(function() {
if (img.style.visibility == 'visible') {
img.style.visibility = 'hidden';
} else {
img.style.visibility = 'visible';
}
}, 1000);
https://jsfiddle.net/65t0ye2m/

blinking gif with javascript - timer

i have a div-container with a gif-picture. I want to blinking this gif, but the gif is only show and is not blinking
function blink() {
time2 = time2 - 1;
if (time2 >= 0) {
var ani = setInterval(blinkerle() {
if (document.getElementById(risiko1).style.visibility == "visible") {
document.getElementById(risiko1).style.visibility = "hidden";
} else {
document.getElementById(risiko1).style.visibility = "visible";
}
}, 1000);
}
}
the function is called via blink();
from another place. thanks for your help
You can actually do this with pure CSS:
div {
display: block;
position: relative;
top: 5px;
width: 200px;
height: 50px;
background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png");
background-position: top left;
background-repeat: no-repeat;
text-indent: -999em;
}
/** the blink css is below this comment: **/
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
<div class="blink"></div>
CSS taken from here.
You're missing the function keyword in front of the blinkerle() function. It should be:
var ani = setInterval(function blinkerle(){
Or preferably use an anonymous function:
var ani = setInterval(function() {

Categories