Steps for ensuring that a script is loaded after the page has fully loaded

Question

Steps for ensuring that a script is loaded after the page has fully loaded

Is there a way to make the progress bar begin its loading animation after the `onload` loader animation has completed? Check out this example of normal progress bar animations: JSFiddle

Alternatively, here is an example with the `onload` loader added: JSFiddle. You'll notice that the progress bar animation doesn't work properly in this scenario.

Initially, I believed that the progress bar animation was occurring behind the `onload` loader. However, upon reducing the seconds for the loader, I realized that the progress bar animation doesn't work at all.

If you have any insights or suggestions on how to resolve this issue, I would greatly appreciate your help! Thank you!

javascript html jquery css

Answer 1

Answer №1

It seems like you are activating the load bar animation when the page loads, but it would be more effective to initiate the trigger after the loading animation has completed.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f918f93">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435d435f">[email protected]</a>/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>

Answer 2

It seems like you are activating the load bar animation when the page loads, but it would be more effective to initiate the trigger after the loading animation has completed.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f918f93">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435d435f">[email protected]</a>/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>

Steps for ensuring that a script is loaded after the page has fully loaded

Answer №1

Similar questions

Creating a vertical gradient that repeats horizontally using CSS

attempting to switch a container with a single click

Utilizing Angular directives to trigger functions within nested child directives

Presenting information on an HTML webpage using the slidetoogle feature

How can PHP be used to compare a value with an array and assign it to a variable?

Referencing a JSON object

Retrieving Apache environment variables in JavaScript

Unable to link to '' because it is not recognized as a valid attribute of '' in Angular 2

Twice the clicking actions triggered by the event

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

The gap between columns in Bootstrap grids

At what point is the rendering process of ng-switch completed?

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

Using VueJs's createElement() to dynamically insert HTML content

A Step-by-Step Guide to Mocking a jQuery Function Using Jasmine in an Angular Directive Specification

Angular 8: Bridging the gap between two players with a shared singleton service

Is it possible to align text to an image within an input text field?

Utilizing JQuery-UI for DateTimePicker Implementation in MVC Framework

Background image for numerical input field

extracting a HTML element from a website using BeautifulSoup