使用CSS3制作一個簡單的進(jìn)度條(demo)
發(fā)布時間：2017-05-23 16:30:26 作者：佚名 
我要評論
我要評論這篇文章主要介紹了使用CSS3制作一個簡單的進(jìn)度條(demo)的相關(guān)資料,需要的朋友可以參考下
這里只是一個小demo,一個用CSS3寫的進(jìn)度條。
如圖所示：
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
width:100px;
display:inline-block;
*zoom:1;
}
.pb-wrapper
{
border:1px solid #cfd0d2;
position:relative;
background:#cfd0d2;
border-radius: 8px;
}
.pb-container
{
height:12px;
position:relative;
left:-1px;
margin-right:-2px;
font:1px/0 arial;
padding:1px;
}
.pb-highlight
{
position:absolute;
left:0;
top:0;
_top:1px;
width:100%;
opacity:0.6;
filter:alpha(opacity=60);
height:6px;
background:white;
font-size:1px;
line-height:0;
z-index:1
}
.pb-text
{
width:100%;
position:absolute;
left:0;
top:0;
text-align:center;
font:10px/12px arial;
color:black;
font:10px/12px arial
}
</style>
</head>
<body>
<div class="process-bar skin-green">
<div class="pb-wrapper">
<div class="pb-highlight"></div>
<div class="pb-container">
<div class="pb-text">50%</div>
<div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div>
</div>
</div>
</div>
</body>
</html>
以上所述是小編給大家介紹的使用CSS3制作一個簡單的進(jìn)度條(demo)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要給大家介紹了利用CSS3實現(xiàn)進(jìn)度條的兩種姿勢，文中給出了詳細(xì)的示例代碼和圖文介紹，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-21
HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實現(xiàn)，下載進(jìn)度條的代碼實例
本篇文章主要介紹了HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實現(xiàn)，下載進(jìn)度條的代碼實例，具有一定的參考價值，有興趣的可以了解一下。2016-12-30- 用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等樣式就可以完成一個時尚進(jìn)度條,這里我們來看幾個CSS3制作彩色進(jìn)度條樣式的代碼2016-06-23
圖解CSS3制作圓環(huán)形進(jìn)度條的實例教程
圓環(huán)形進(jìn)度條制作的基本思想還是畫出基本的弧線圖形,然后CSS3中我們可以控制其旋轉(zhuǎn)來串聯(lián)基本圖形,制造出部分消失的效果,下面就來帶大家學(xué)習(xí)圖解CSS3制作圓環(huán)形進(jìn)度條的實2016-05-26html5+css3進(jìn)度條倒計時動畫特效代碼【推薦】
下面小編就為大家分享一篇html5+css3進(jìn)度條倒計時動畫特效代碼【推薦】。希望對大家有所幫助。一起跟隨小編過來看看吧2016-03-08可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條分享
這篇文章主要介紹了可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條，文章最后有下載地址,需要的朋友可以參考下2014-04-11CSS3實現(xiàn)的閃爍跳躍進(jìn)度條示例(附源碼)
原理是通過大量的css3屬性來實現(xiàn)的，如：animation、transform、keyframes等等屬性，示例采用了結(jié)構(gòu)性偽類選擇符E:nth-child(n)，來進(jìn)行對HTML元素的選擇以及控制輸出，感2013-08-19- 進(jìn)度條而且還是帶有閃亮，不可思議吧，看下效果圖，至于實現(xiàn)代碼，感興趣的前端設(shè)計者可以參考下哈，或許有所意想不到的收獲2013-04-17
純CSS3編寫的的精美動畫進(jìn)度條(無flash/無圖像/無腳本/附源碼)
加載動畫和進(jìn)度條的真正目的是讓用戶了解任務(wù)的進(jìn)度，有很多的基于JavaScript的動畫，但我決定切換到CSS3,使用純CSS：沒有flash，沒有圖像，沒有腳本2013-01-07css3制作動態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示
今天就為大家分享一個利用css3制作動態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示,其效果對比flash來說卻毫不遜色，有一個精致的動畫進(jìn)度條，上面還有當(dāng)前進(jìn)度的百分比數(shù)字顯示，2012-12-13
