How to implement progress bar in css

CSS Implementation of Progress Bar

As a common component, progress bar often appears in various websites and applications. For example, download progress, upload progress, web page loading progress, etc. It is very simple to implement a progress bar using CSS. This article will introduce readers to the method of implementing a progress bar in detail.

HTML structure

To implement a simple progress bar, you need to define the HTML structure first. The following is the most basic HTML structure:

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

Among them, progress is the container representing the progress bar, and progress-bar represents the progress bar itself. Of course, we can also add more elements in progress, such as progress text and so on.

CSS Style

Next, we need to add CSS style to implement the progress bar.

First, you need to set the width and height of the progress container, and set position: relative and overflow: hidden in the CSS properties. This ensures that the progress bar is displayed in the container and hides the content outside the container. At the same time, the positioning of the progress bar container is set to relative positioning.

.progress {
  width: 100%;
  height: 20px;
  position: relative;
  overflow: hidden;
}

Then, set absolute positioning for progress-bar and set the left margin to 0. At the same time, set the width of the progress bar to 0 so that the progress bar will not be displayed at the beginning.

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.8s ease;
}

Code explanation:

• left: 0 means placing the progress bar on the leftmost side of the container.
• top: 0 means placing the progress bar at the top of the container.
• width: 0 Indicates that the initial width of the progress bar is 0, so it will not be displayed initially.
• height: 100% means setting the height of the progress bar to be as high as the container.
• background-color: #007bff is to set the color of the progress bar.
• transition: width 0.8s ease means using CSS transition animation to slowly increase the width of the progress bar to the target value.

Finally, we can use JavaScript or CSS animation to control the width of the progress bar to display progress. Here is an example using JavaScript:

const progressBar = document.querySelector('.progress-bar');
let percentage = 0;

function progress() {
  if (percentage < 100) {
    percentage++;
    progressBar.style.width = percentage + '%';
  } else {
    clearInterval(intervalId);
  }
}

const intervalId = setInterval(progress, 20);

This example gradually increases the width of the progress bar from 0% to 100%, stopping at 100%. We can also define the width and increasing speed of the progress bar according to the actual situation.

If you don’t want to use JavaScript, we can also use CSS animation to achieve the effect of the progress bar. The following is a simple CSS animation example:

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  animation: progress 5s ease-in-out;
}

@keyframes progress {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

This example gradually increases the width of the progress bar from 0% to 100% and completes it within a certain time. Among them, the animation attribute defines the name, time and easing method of the animation. @keyframes represents the key frames that define the progress bar animation, from 0% to 100%.

Summary

The above is how to implement a progress bar using CSS. Through the combination of HTML structure and CSS style, a basic progress bar can be easily completed. In terms of implementation, we can use JavaScript or CSS animation to control the width of the progress bar to display progress. In different projects, the style and display method of the progress bar should be defined according to the actual situation to achieve better results.

The above is the detailed content of How to implement progress bar in css. For more information, please follow other related articles on the PHP Chinese website!