A simple implementation method of web page progress bar

A very simple progress bar

It can be realized with a simple css attribute: cilp

clip：rect(top,right,bottom,left
)

Write a small program first to explain

<style>        
.box {            
     width: 200px;           
     height: 20px;            
     background:#ccc;            
     border-radius:10px;           
     position:relative       
      }       
.clip {            
    position: absolute;            
    width: 100%;
   height: 100%;            
   clip: rect(0px,100px,20px,0px);            
   background: red;            
   border-radius:10px;        
   }    
   </style>
<p class=&#39;box&#39;>
    <span class=&#39;clip&#39;></span>
</p>

Display effect:

##Add position: absolute; width: 100% to .clip; height: 100%; compared to adding a box with the same width and height in the box, the background is red;

##rect(top,right,bottom,left) ,

Relative to controlling the displayed area of ​​this box, by changing the value of the distance right, the displayed area becomes larger

The above is the detailed content of A simple implementation method of web page progress bar. For more information, please follow other related articles on the PHP Chinese website!