how to make script load after onload

DaTZcodie 0
Viewed 50

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!

jquery javascript css html
1 Answers

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>

jla0
Related