how to make script load after onload
Question
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!
1 answers
solution1
0 2022-09-07 00:46:22
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.