How to implement a front-end progress bar with ring effect and mouse prompt information?

Create a cool front-end progress bar: ring effect and mouse prompts

The implementation of the front-end progress bar seems simple, but it takes some skills to take into account both aesthetics and functionality. This article will explore how to create a custom progress bar with a ring effect and a mouseover prompt.

First, we need to implement a progress bar with a core element containing a middle ring and a mouseover prompt. This article will use purely native JavaScript, CSS and HTML instead of relying on specific UI frameworks to provide greater flexibility.

Challenges and solutions

1. Implementation of ring effect: Inserting nodes directly into existing components may have compatibility issues or limitations. Therefore, we chose to build the ring through CSS style and HTML structure.

2. Mouse hover prompt: This requires using JavaScript to listen for mousemove events and dynamically generate or update prompt information.

Implementation steps and code examples

1. HTML structure: Create a container containing progress bars and rings.

<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-circle"></div>
</div>

2. CSS style: Defines the style of progress bars, rings, and containers.

 .progress-container {
  width: 200px; /* adjustable width*/
  height: 20px;
  background-color: #f0f0f0;
  position: relative; /* Provide reference for absolutely positioned rings*/
}

.progress-bar {
  height: 100%;
  background-color: #4CAF50; /* Customizable colors*/
}

.progress-circle {
  width: 15px; /* ring size*/
  height: 15px;
  background-color: white;
  border: 2px solid #4CAF50;
  border-radius: 50%;
  position: absolute;
  right: 0; /* Ring position*/
  top: 2.5px; /* Vertical centering adjustment*/
}

3. JavaScript dynamic update: Use JavaScript to dynamically adjust the progress bar width and handle mouse events.

 const progressBar = document.querySelector('.progress-bar');
const progressContainer = document.querySelector('.progress-container');
let progress = 0; // Initial progress function updateProgress(newProgress) {
  progress = Math.min(100, Math.max(0, newProgress)); // Ensure that the progress is between 0-100 progressBar.style.width = `${progress}%`;
}

progressContainer.addEventListener('mousemove', (e) => {
  const rect = progressContainer.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const calculatedProgress = (x / rect.width) * 100;
  updateProgress(calculatedProgress); // Real-time update progress// Display prompt information (you can use the tooltip library or custom prompt box)
  const tooltip = document.createElement('div');
  tooltip.classList.add('tooltip');
  tooltip.textContent = `${calculatedProgress.toFixed(0)}%`;
  tooltip.style.left = `${x}px`;
  tooltip.style.top = `${rect.bottom 5}px`; // Prompt box location document.body.appendChild(tooltip);
});


progressContainer.addEventListener('mouseout', () => {
  // Remove the prompt message const tooltip = document.querySelector('.tooltip');
  if (tooltip) {
    document.body.removeChild(tooltip);
  }
});

// Example: Simulate progress changes setInterval(() => {
  updateProgress(progress 5);
}, 1000); // Increase progress by 5% per second

Remember to add the style of tooltip:

 .tooltip {
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0.9;
  pointer-events: none; /* Prevent mouse occlusion events*/
}

This code implements the basic progress bar and ring effects, as well as progress updates and prompt information display when the mouse moves. You can adjust CSS style and JavaScript logic according to actual needs, such as adding animation effects, more refined prompt information, etc. Remember, for a better user experience, consider using a more mature tooltip library to handle prompt information.

The above is the detailed content of How to implement a front-end progress bar with ring effect and mouse prompt information?. For more information, please follow other related articles on the PHP Chinese website!