Create a simple static progress bar with html and CSS (detailed explanation with pictures and text)-CSS Tutorial-php.cn

Create a simple static progress bar with html and CSS (detailed explanation with pictures and text)

yulia

Release： 2018-10-29 14:12:23

Original

11604 people have browsed it

Friends who often browse websites or frequently layout pages should be familiar with progress bars, and some progress bars will have animation effects when the page is refreshed. Friends who are learning front-end knowledge, you will use html and CSS Make a simple static progress bar? This article will tell you how to use HTML and CSS to achieve the progress bar effect, and finally share the simple HTML progress bar code. Interested friends can refer to it.

Using CSS to make a simple progress bar requires the use of basic knowledge in CSS, such as border-radius rounded corners, centering, etc. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or Visit CSS video tutorial and be sure to learn the basics well!

Example: Use html and CSS to make a simple static progress bar

HTML part:

Observing the progress bar, you can find that the progress bar consists of two parts, one is progress The total length of the bar, one is the length of the progress, so we create two divs, one div as the parent element and the other div as the child element, and give them a class name respectively to facilitate setting styles. The specific code is as follows:

<p>进度条</p>
<div class="container">
   <div class="skills loading">70%</div>
</div>

Copy after login

CSS part:

The basic framework has come out, now we need to style the two divs. Set the length of the first div to 300px, the height to 30px, and the background color to #ddd. For aesthetics, we can also use the border-radius attribute to make it rounded. Set the length of the second div to 70%, which is the value of the progress bar. Give the div a color different from the parent element to make it easier to see the effect. Finally, use line-height and text-align: center to center the position horizontally and vertically. , the specific code is as follows:

.container {
    width: 300px;
    height: 30px;
    background-color: #ddd;
    border-radius: 20px;
   }
   
   .skills {
    line-height: 30px;
    color: white;
    border-radius: 20px;
    text-align: center;
    width: 70%;
    background-color: #4CAF50;
   }

Copy after login

Effect picture:

Create a simple static progress bar with html and CSS (detailed explanation with pictures and text)

As can be seen from the picture, a 70% green progress bar has been created.

The above introduces you how to use html and CSS to make a simple static progress bar. The steps are explained in detail, which is relatively simple and easy to understand. Friends who are new to css must try it and practice it yourself to see if you can Can the code show the effect of the progress bar? I hope this article can help you!