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!
CodePudding user response:
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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<body onl oad="myFunction()" style="margin:0;">
<div id="loader"></div>
<div id="myDiv" style="display:none;">
<div >
<br><br>
<div >
<div ></div>
</div>
</div>
<div >
<div >
<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 >
<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>