这篇文章将为大家详细讲解有关css横向进度条和竖向进度条如何实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一、横向进度条
<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='width:30%;'>30%</strong> </div></body></html>效果如下：
二、竖向进度条
<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='height:30%;'>30%</strong> </div></body></html> 
关于“css横向进度条和竖向进度条如何实现”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
