I am trying to make my progress bar load (animate) after the onload loader animation has finished, here is a link to an example of the progress bars animating normally: JSFiddle
& here is an example with the loader onload added: JSFiddle you can see how the progress bar animation doesn't function properly in this example.
Originally I thought the progress bar animation was happening behind the onload loader but if I lower the seconds for the loader I can see the progress bar animation doesn't function at all
Any help is appreciated thanks!
You are triggering the load bar animation on page load, whereas you need to move the trigger to run after your loading animation finishes.
let $radios
const radioChange = () => {
let progress_value = 0
$radios.filter(':checked').each( function() {
progress_value += Number($(this).data('progress'))
})
console.log(progress_value)
$(".progress-value").width(progress_value + '%')
}
$(document).ready(function() {
$radios = $('input[type="radio"]')
$radios.change(radioChange);
})
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 500);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
setTimeout( () => $radios.first().change(), 20 )
}
.progress {
background: rgba(255, 255, 255, 0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
display: flex;
height: 10px;
width: 100%;
margin-bottom: 10px;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
transition: width 2s;
}
/* Center the loader */
#loader {
position: absolute;
left: 47%;
top: 44%;
z-index: 1;
width: 120px;
height: 120px;
border: 16px solid #333;
border-radius: 50%;
border-top: 16px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#media(max-width:768px){
#loader{
left:35% !important;
top:40% !important;
}
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div class="whole animate-bottom" id="myDiv" style="display:none;">
<div class="wrappy">
<br><br>
<div class="progress">
<div class="progress-value"></div>
</div>
</div>
<div class="row">
<div class="col-6">
<input type="radio" style="display:none;" id="js1" data-price="146.99" value="option1a" name="ONE" data-progress="50" checked>
<label for="js1" onclick="">
Option 1a (Default 50%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js2" data-price="123.99" value="option2a" name="ONE" data-progress="75">
<label for="js2" onclick="">
Option 2a (75%)
</label>
</div>
</div>
</div>
</body>
Related
Good evening, I'm a beginner front-end developer who is trying to implement sketches of Pinterest for training.
I've found this gif for the signup/login page but I have a major issue for implementing animation, I don't have any idea for reversing the animation when the user clicks on the signup button can anybody tell me how can I reverse an animation?
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
.containerForm {
width:50px;height:50px;background-color:red;
}
.slide {
animation: slide 2s ease-in-out;
position: relative;
animation-fill-mode: forwards;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
overflow: hidden;
visibility: visible;
}
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
but as I've said I don't have an idea for the second step
Link of gif
you can add another css class and make use of the animation-direction property.
ie
.slide-back{
animation: slide 2s ease-in-out;
position: relative;
animation-direction: reverse;
}
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
function reverse() {
var element = document.getElementById("containerForm")
element.classList.remove("slide")
}
.containerForm {
width:50px;
height:50px;
background-color:red;
transform: translateX(0);
transition: transform 2s;
}
.slide {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
<button onclick="reverse()">click</button>
transition works too:
example:
*{margin:0;}
#tst {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 100vh;
background: #555;
}
label {
margin: auto;
appearance: button;
cursor: pointer;
min-width: 6em;
text-align: center;
}
#a,
#b {/*hides radios */
position: absolute;
right: 100vw;
}
[for="a"],
#c {
grid-row: 1;
grid-column: 1;
}
#c {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background: white;
border: solid;
transition: 0.5s;
font-size:2vw;
}
#a:checked~#c {
transform: translatex(0)
}
#b:checked~#c {
transform: translatex(100%)
}
h1 {
margin: auto;
}
#c p[class] {
margin: auto;
grid-column: 1;
grid-row: 2;
transition: 0.25s;
background: inherit;
color: #164fb7;
font-size: 3vw;
}
#c p.b {
opacity: 0;
color: tomato;
}
#b:checked~#c p.b {
opacity: 1
}
/* there were no js nor animation nor absolute positionning ;) */
<div id="tst">
<input id="a" type=radio name=toggle>
<input id="b" type=radio name=toggle>
<label for="a">Left</label>
<label for="b">Right</label>
<div id="c">
<h1>here or there ?</h1>
<p class="a">Standing on the left</p>
<p class="b">Standing on the right</p>
</div>
</div>
Instead of adding a class I suggest using the animation-play-state property and adding event listeners:
one click listener to the button
one animationiteration to the div
simply change the play state from paused to running
Let me show you what I mean:
const element = document.getElementById("containerForm");
const btn = document.querySelector("button");
function animation() {
element.style.animationPlayState = "running";
}
function stopAnimation() {
element.style.animationPlayState = "paused";
}
btn.addEventListener("click", animation);
element.addEventListener("animationiteration", stopAnimation);
.containerForm {
width: 50px;
height: 50px;
background-color: red;
animation: slide 2s ease-in-out infinite alternate paused;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button>click</button>
I have two images on my html page and i'm using jquery to check when they are fully loaded before removing the circle loader overlay (individually for each image).
So at the beginning the overlay with the loader animation is shown on each pictures, and every time a picture is loaded the overlay is toggled off. But with my current code the overlay is not toggled off at all.
<div class="img" id="img1">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
<div class="img" id="img2">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
$(document).ready(function(){
$('.img').each(function(){
let img = $(this).css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
$('<img/>').attr('src', img).on('load', function() {
$('#' + $(this).attr('id') + ' .image-loader').hide();
});
});
});
The code was working for a single image:
$(document).ready(function(){
let img = $('#img1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
$('<img/>').attr('src', img).on('load', function() {
$('#img1 .image-loader').hide();
});
});
Does anyone have a solution for this? thanks
this inside your load function refers to the dynamic $('<img/>') element. So $(this).attr('id') is undefined and none of the loaders disappear.
You need to store a reference before and use it as shown:
$(document).ready(function() {
$('.img').each(function() {
let img = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
let id = $(this).attr('id')
$('<img/>').attr('src', img).on('load', function() {
$('#' + id + ' .image-loader').hide();
});
});
});
body {
margin: 0
}
.view {
height: 100vh;
width: 100vw;
background-color: blanchedalmond;
display: grid;
place-content: center;
}
.img {
background-position: center center;
background-size: cover;
height: 50vh;
width: 50vw;
}
#img1 {
background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x5400x2700.jpg');
}
#img2 {
background-image: url('https://edmullen.net/test/rc.jpg');
}
.image-loader {
height: 100%;
width: 100%;
display: grid;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
}
.cssload-speeding-wheel {
width: 49px;
height: 49px;
margin: 0 auto;
border: 5px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
animation: cssload-spin 800ms infinite linear;
-o-animation: cssload-spin 800ms infinite linear;
-ms-animation: cssload-spin 800ms infinite linear;
-webkit-animation: cssload-spin 800ms infinite linear;
-moz-animation: cssload-spin 800ms infinite linear;
}
#keyframes cssload-spin {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes cssload-spin {
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes cssload-spin {
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes cssload-spin {
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view">
<div class="img" id="img1">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
<div class="img" id="img2">
<div class="image-loader">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
</div>
I have a page loader , it will load until my entire page loading complete ,this works fine with chrome but doesnt support in firefox .any other solutions welcome
<style>
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
</style>
<body>
<div id="loading">
<img id="loading-image" src="images/loader.gif" alt="Loading..." />
</div>
<script>
window.onload = function(){ document.getElementById("loading").style.display = "none" }
</script>
</body>
this is a complete ansower for u :)
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 30;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display:block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
that was the style now the body
<div id="loader"></div>
hope it helps :)
I'm building an app for Android in HTML. I made the NavigationDrawer in HTML, and with javascript I make it to show on button click, and dissapear on <p> click. I'm using keyframes for the animations. When I press the button, the animation works (I am using -webkit-transform: translateX), and when I click the button again, the animation works but the div doesn't hide. It remains on the screen, but I can click through it (like pointer-events: none;). What's the problem?
CSS:
#-webkit-keyframes sMenuClose {
from {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(-100%);
}
}
#-webkit-keyframes sMenuOpen {
from {
-webkit-transform: translateX(-100%);
}
to {
-webkit-transform: translateX(0%);
}
}
.slidemenu {
background: transparent;
height: 100%;
left: 0px;
pointer-events: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 9991;
}
.slidemenu .menu {
background: #FFF;
border-right: 1px solid #000;
color: #333;
height: 100%;
overflow: visible;
pointer-events: visible;
position: absolute;
top: 0px;
-webkit-transform: translateX(-100%);
width: 80%;
}
.slidemenu .menu.hidden {
-webkit-animation-name: sMenuClose;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
}
.slidemenu .menu.visible {
-webkit-animation-name: sMenuOpen;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
}
HTML:
<html>
<head>
...
</head>
<body>
...
<div class="slidemenu">
<div class="menu">
<p>Some text</p>
</div>
</div>
</body>
</html>
JS:
window.onload = function() {
document.querySelector("body div#actionbar div.action ul li.menu a").addEventListener("click", function(e) {
e.preventDefault();
if(document.querySelector("body div.slidemenu div.menu").classList.contains("hidden"))
{
document.querySelector("body div.slidemenu div.menu").classList.remove("hidden");
}
document.querySelector("body div.slidemenu div.menu").classList.add("visible");
});
document.querySelector("p").addEventListener("click", function(e) {
e.preventDefault();
document.querySelector("body div.slidemenu div.menu").classList.remove("visible");
document.querySelector("body div.slidemenu div.menu").classList.add("hidden");
});
};
Can you help me?
I think you can get the effect you are after with a slightly simpler setup. This example is modified slightly to show a demo here but I think you should be able to convert this button back into your li menu item with ease. I made the slideout a light blue just so it is easier to see here as well.
function slideMenu_Toggle(){
var _selector = "body div.slidemenu div.menu";
document.querySelector(_selector).classList.toggle("visible");
}
window.onload = function() {
var _selector = ".slidemenu .menu";
document.querySelector(_selector).addEventListener("click", function(){
if( this.classList.contains("visible") ) { slideMenu_Toggle(); }
});
document.querySelector("#toggle").addEventListener("click", slideMenu_Toggle);
};
.slidemenu {
background: transparent;
height: 100%;
left: 0px;
pointer-events: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 9991;
}
.slidemenu .menu {
border-right: 1px solid #000;
color: #333;
height: 100%;
overflow: visible;
position: absolute;
top: 0px;
width: 80%;
pointer-events: visible;
background: aliceblue;
-webkit-transition: transform .5s ease;
-webkit-transform: translateX(-100%);
}
.slidemenu .menu.visible {
-webkit-transform: translateX(0%);
}
<div style="text-align: right; margin-top: 3em;">
<button id="toggle" style="font-size: 2em;">toggle</button>
</div>
<div class="slidemenu">
<div class="menu">
<p>Some text</p>
</div>
</div>
Here is a workaround
<script language="JavaScript">
var TheDivParentContents
self.window.onload=getDivContents
function getDivContents(){
TheDivParentContents=document.getElementById("TheDivParent").innerHTML;
}
function OnClickHideDiv(){
document.getElementById("TheDivParent").innerHTML="";
}
function OnClickShowDiv(){
document.getElementById("TheDivParent").innerHTML=TheDivParentContents;
}
</script>
<body bgcolor="white">
<input script=JavaScript type=button onclick="OnClickShowDiv()" value="Show Div">
<input script=JavaScript type=button onclick="OnClickHideDiv()" value="Hide Div">
<span id=TheDivParent>
<div>
some text
</div>
</span>
</body>
Note that i place the div that i want to hide inside a Span tag. and that span tag will be used by the functions in the script to save the innerhtml of the div to a global variable.. Hope this works for you.
I updated my animation of the Microsoft's logo. It's available on CodePen. Overall, I am quite satisfied with it now apart from one thing.
I cannot seem to figure out how to stop the animation so the logo looks correct. I tried setting the delay to 6000ms = 6s = length of the animation, but it looked way off. Right now it's set to 5900ms. Any tips on this?
Another thing I was wondering was, how would you make the YouTube video play after a certain amount of time, say when the text appears? Thanks!
var playState = '-webkit-animation-play-state';
$(".boxes").css(playState, "running");
setTimeout(function() {
$(".boxes").css(playState, "paused");
}, 5900);
body {
background: hsl(30, 20%, 20%);
color: #fff;
font-family: 'Open Sans', sans-serif;
}
.boxes {
-webkit-animation: logo 6s 1 forwards;
animation: logo 6s 1 forwards;
position: absolute;
}
.box {
-webkit-animation: scaling 1.5s cubic-bezier(.1,.95,.7,.8) 4;
animation: scaling 1.5s cubic-bezier(.1,.95,.7,.8) 4;
height: 50px;
width: 50px;
}
.brand {
-webkit-animation: fadein 2s ease 4.5s forwards;
animation: fadein 2s ease 4.5s forwards;
display: inline;
font-size: 36px;
margin: 24px 0 0 0;
opacity: 0;
position: relative;
top: -36px;
text-align: center;
z-index: 0;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.intro {
text-align: center;
}
.logo {
-webkit-animation: moveLeft .5s linear 4.5s forwards;
animation: moveLeft .5s linear 4.5s forwards;
display: inline-block;
height: 100px;
left: 100px;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 1;
}
.player {
display:none;
}
#green {background: #7cbb00;}
#yellow {background: #ffbb00;}
#blue {background: #00a1f1;}
#red {background: #f65314;}
#animateGreen {animation-delay: 4.5s;}
#animateYellow {animation-delay: 3s;}
#animateBlue {animation-delay: 1.5s;}
#animateRed {animation-delay: 0s;}
#keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes logo {
0% {left: 0px; top: 0px; transform: rotate(0deg)}
25% {left: 50px; top: 0px; transform: rotate(-180deg)}
50% {left: 50px; top: 50px; transform: rotate(-360deg)}
75% {left: 0px; top: 50px; transform: rotate(-540deg)}
100% {left: 0px; top: 0px; transform: rotate(-720deg)}
}
#keyframes moveLeft {
from {padding-right: 0; left: 100px;}
to {padding-right: 50px; left: 0;}
}
#keyframes scaling {
0%, 100% {transform: scale(1)}
50% {transform: scale(.5)}
}
<head><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></head>
<div class="flex">
<div class="intro">
<div class="logo">
<div class="boxes" id="animateGreen">
<div class="box" id="green">
</div>
</div>
<div class="boxes" id="animateYellow">
<div class="box" id="yellow">
</div>
</div>
<div class="boxes" id="animateBlue">
<div class="box" id="blue">
</div>
</div>
<div class="boxes" id="animateRed">
<div class="box" id="red">
</div>
</div>
</div>
<div class="brand">
Microsoft
</div>
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I3Ak5VgyEoc?autoplay=1" class="player"></iframe>
Instead of using jQuery/JavaScript to stop the animation a better approach would be to specify a different animation for each box ending with them in the position you want.
Example CodePen
As for playing a YouTube video when the text appears, if you refer to the YouTube API Docs it would be something like this in jQuery:
setTimeout(function(){
//play the youtube video (#playerId) is the id of your youtube video element
$('#playerId').get(0).playVideo();
} , 4500); //4500 is the delay in ms