Spinning progress bar in every listview item

Spinning Progress Bar in Every Listview Item

This article explores how to implement spinning progress bars within each item of a listview using HTML, CSS, and JavaScript.

HTML Structure

The basic structure of a listview with a spinning progress bar in each item is as follows:

<ul id="listView">
  <li>
    <span class="item-text">Item 1</span>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
  </li>
  <li>
    <span class="item-text">Item 2</span>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
  </li>
  <li>
    <span class="item-text">Item 3</span>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
  </li>
</ul>

Explanation

• <ul>: Represents the unordered list (listview).
• <li>: Each list item contains the item text and the progress bar.
• <span class=”item-text”>: Holds the text content of each item.
• <div class=”progress-container”>: Contains the progress bar element and provides styling control.
• <div class=”progress-bar”>: Represents the spinning progress bar.

CSS Styling

We’ll use CSS to style the listview, the items, and the spinning progress bars. Below is a sample CSS code:

#listView {
  list-style: none;
  padding: 0;
}

#listView li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.progress-container {
  width: 100%;
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
  border-radius: 5px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Explanation

• #listView: Styles the listview itself, removing the list markers and padding.
• #listView li: Styles the individual list items with margins, padding, borders, and rounded corners.
• .progress-container: Sets the width, height, background, border-radius, and overflow for the progress bar container.
• .progress-bar: Styles the spinning progress bar with initial width, background color, border-radius, and the “spin” animation.
• @keyframes spin: Defines the animation keyframes for the spinning effect.

JavaScript for Dynamic Behavior

We can use JavaScript to create dynamic progress bars, for example, to control their width or animation speed. Here’s a basic example:

<script>
  // Get the listview elements
  const listView = document.getElementById('listView');
  const listItems = listView.querySelectorAll('li');

  // Loop through each list item and create progress bars
  listItems.forEach(item => {
    const progressBar = item.querySelector('.progress-bar');
    progressBar.style.width = `${Math.random() * 100}%`; // Set random width
    progressBar.style.animationDuration = `${Math.random() * 3 + 1}s`; // Set random animation duration
  });
</script>

Explanation

• The script gets the listview and all its items.
• It loops through each item, finds the progress bar within it.
• It sets a random width (between 0% and 100%) and a random animation duration (between 1 and 4 seconds) for each progress bar.

Example

HTML

<ul id="listView">
  <li>
    <span class="item-text">Item 1</span>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
  </li>
  <li>
    <span class="item-text">Item 2</span>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
  </li>
  <li>
    <span class="item-text">Item 3</span>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
  </li>
</ul>

CSS

#listView {
  list-style: none;
  padding: 0;
}

#listView li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.progress-container {
  width: 100%;
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
  border-radius: 5px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript

<script>
  const listView = document.getElementById('listView');
  const listItems = listView.querySelectorAll('li');

  listItems.forEach(item => {
    const progressBar = item.querySelector('.progress-bar');
    progressBar.style.width = `${Math.random() * 100}%`;
    progressBar.style.animationDuration = `${Math.random() * 3 + 1}s`;
  });
</script>

This example will create a listview with three items, each containing a spinning progress bar with random width and animation duration.

Conclusion

This article has demonstrated a basic approach to incorporating spinning progress bars within each listview item. You can customize the styling, animations, and JavaScript code to create more complex and engaging user interfaces.