Another new custom component: progress bar

Elements Custom Components
1

I experimented further with the possibilities of custom components, and they seem to be endless. This is a progress bar where almost everything can be configured (main bar, progress bar, bubble). Colors, borders, paddings, text… You can also choose whether or not to display the bubble. The percentage of the progress bar can be adjusted via a slider.

As always: anyone who wants to can use, modify, or simply ignore this component.

Progress Bar CC 1.0

Scherm­afbeelding 2024-11-27 om 14.08.49
Scherm­afbeelding 2024-11-27 om 14.08.492026×502 15.7 KB

Scherm­afbeelding 2024-11-27 om 14.09.10
Scherm­afbeelding 2024-11-27 om 14.09.10620×328 10.5 KB

3 Likes
2

Oh that is very cool, and you inspired me to do a progress bar tied to page length. Only took five minutes with my good friend ChatGPT. No property controls, but they could easily be added…

Here’s the code to paste in the Template area of the Custom Component:

<div class="progress-bar sticky top-0 z-50 bg-white">
  <div class="relative">
    <!-- Container for the progress bar -->
    <div class="bg-gray-300 h-4 overflow-hidden">
      <!-- Wrapper for the padding of the progress bar -->
      <div class="h-full flex items-center">
        <!-- The progress bar itself -->
        <div id="progress" class="bg-blue-500 h-full" style="width: 0%;"></div>
      </div>
    </div>

    <!-- Percentage marker -->
    <div id="marker" class="absolute bg-white font-bold min-h-[24px] bottom-full flex items-center justify-center z-10" style="left: 0%; transform: translateX(-50%);">
      0%
      <div class="absolute h-4 bg-white"></div>
    </div>
  </div>
</div>

@portal(headEnd)
<!-- Code here will be transported to the bottom of the page head  -->

<script>
  // Function to update progress bar on scroll
  const updateProgressBar = () => {
    const progressBar = document.getElementById('progress');
    const marker = document.getElementById('marker');
    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollTop = window.scrollY || document.documentElement.scrollTop;

    // Calculate percentage scrolled
    const percentage = Math.min((scrollTop / scrollHeight) * 100, 100).toFixed(0);

    // Update progress bar width
    progressBar.style.width = `${percentage}%`;

    // Update marker position and text
    marker.style.left = `calc(${percentage}% - 20px)`;
    marker.textContent = `${percentage}%`;
  };

  // Attach scroll event listener
  window.addEventListener('scroll', updateProgressBar);

  // Initial update
  updateProgressBar();
</script>
@endportal
4 Likes