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:253538browse

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!

css

Statement：

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

Previous article：How to achieve font long shadow effect in cssNext article：How to achieve font long shadow effect in css

See more

How to achieve horizontal and vertical progress bar effects with css

Related articles