有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用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 横向进度条和竖向进度条实现代码的文章就介绍到这了,更多相关css 横向进度条和竖向进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
纯css图切换 练习 教程来自snwebsite 1 2 3 [Ctrl+A 全选 注: 引入外部Js需再刷...
项目中 console debug 嵌入代码 如何 优雅删除 黑魔法 babel 基于 ast，之前简单...
Create React App （以下简称 CRA）是一个官方支持的创建 React 单页应用的脚手...
FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .t...
锚点链接对站点SEO非常重要，当页面内容过多的时候，我们就会用到锚点链接，庞大...
绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满...
!--[if lte IE 6] ![endif]-- IE6及其以下版本可见 !--[if lte IE 7] ![endif]--...
Cascading Style Sheets: The Definitive Guide , 2nd Edition is a thorough re...
截止目前，React Server Component 还在开发与研究中，因此不适合投入生产环境使...
代码示例 在head标签中添加一行代码： XML/HTML Code 复制内容到剪贴板 html hea...
