how to make script load after onload-CodePudding

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>