Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > A simple implementation method of web page progress bar

A simple implementation method of web page progress bar

一个新手

Release： 2017-09-23 10:49:05

Original

2340 people have browsed it

A very simple progress bar

It can be realized with a simple css attribute: cilp

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

Copy after login

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>

Copy after login

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!

Related labels：

accomplish Simple

source：php.cn

Previous article：Introduction to CSS block-level elements/inline elements, inheritance and related properties Next article：How to use Bootstrap to achieve image pop-up and enlargement

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn