body {
        margin: 0;
        height: 100vh;
        display: grid;
        place-items: center;
        background-color: #d0d0d0;
        font-family: sans-serif;
      }
      button {
        padding: 10px 20px;
        font-size: 1em;
        margin-top: 20px;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
      }
      button:hover:not(:disabled) {
        background-color: #0056b3;
      }
      button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
      }

// Get references to our progress bar and button
      const progressBar = document.getElementById('myProgressBar');
      const updateButton = document.getElementById('updateButton');
      let currentPercent = 0; // Keeps track of the current progress percentage
      let intervalId; // To store the ID of our interval, so we can clear it

      /**
       * Function to start the loading animation for the CSS3 3D Progress Bar.
       */
      function startLoading() {
        // If there's already an animation running, clear it first
        if (intervalId) {
          clearInterval(intervalId);
        }
        currentPercent = 0; // Reset progress to 0
        progressBar.setAttribute('percent', currentPercent); // Update the progress bar visually
        updateButton.textContent = 'Loading...'; // Change button text
        updateButton.disabled = true; // Disable button while loading

        // Start an interval to update the progress bar every 300 milliseconds
        intervalId = setInterval(() => {
          currentPercent += 10; // Increase progress by 10%
          if (currentPercent > 100) {
            currentPercent = 100; // Cap at 100%
            clearInterval(intervalId); // Stop the animation
            updateButton.textContent = 'Load Complete!'; // Update button text
            updateButton.disabled = false; // Enable button again
          }
          progressBar.setAttribute('percent', currentPercent); // Update the CSS3 3D Progress Bar
        }, 300); // Adjust this number to make the loading faster or slower
      }

      // Add an event listener to the button so it calls startLoading when clicked
      updateButton.addEventListener('click', startLoading);