Home  >  Article  >  Web Front-end  >  How to achieve horizontal and vertical progress bar effects with css

How to achieve horizontal and vertical progress bar effects with css

王林
王林forward
2020-05-19 09:08:253640browse

How to achieve horizontal and vertical progress bar effects with css

1. The implementation code of the horizontal progress bar

<html>
<head>
<title>横向进度条</title>
<style type="text/css">   
    .loadbar
    {
         width:200px;
         height:25px;
         background-color:#fff;
         border:1px solid #ccc;        
    }
    .bar
    {
        line-height:25px;        
        height:100%;
        display:block;        
        font-family:arial;
        font-size:12px;
        background-color:#bb9319;        
        color:#fff;
    }
</style>
</head>
<body> 
    <div class="loadbar">
      <strong class="bar" style=&#39;width:30%;&#39;>30%</strong>
    </div>
</body>
</html>

The effect is as follows:

How to achieve horizontal and vertical progress bar effects with css

2. Implementation code of vertical progress bar

<html>
<head>
<title>竖向进度条</title>
<style type="text/css">   
    .loadbar
    {
         width:25px;
         height:200px;
         background-color:#fff;
         border:1px solid #ccc;
         position:relative; 
    }
    .bar
    {
        width:100%;
        display:block;        
        font-family:arial;
        font-size:12px; 
        background-color:#bb9319;
        color:#fff;       
        position:absolute;
        bottom:0;        
    }
</style>
</head>
<body> 
    <div class="loadbar">
      <strong class="bar" style=&#39;height:30%;&#39;>30%</strong>
    </div>
</body>
</html>

Implementation results:

How to achieve horizontal and vertical progress bar effects with css

## Recommended tutorial:

CSS basic tutorial

The above is the detailed content of How to achieve horizontal and vertical progress bar effects with css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete