使用CSS3制作一個(gè)簡(jiǎn)單的進(jìn)度條(demo)
發(fā)布時(shí)間：2017-05-23 16:30:26 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用CSS3制作一個(gè)簡(jiǎn)單的進(jìn)度條(demo)的相關(guān)資料,需要的朋友可以參考下
這里只是一個(gè)小demo,一個(gè)用CSS3寫(xiě)的進(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制作一個(gè)簡(jiǎn)單的進(jìn)度條(demo)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
利用CSS3實(shí)現(xiàn)進(jìn)度條的兩種姿勢(shì)詳解
這篇文章主要給大家介紹了利用CSS3實(shí)現(xiàn)進(jìn)度條的兩種姿勢(shì)，文中給出了詳細(xì)的示例代碼和圖文介紹，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-21
HTML5+CSS3網(wǎng)頁(yè)加載進(jìn)度條的實(shí)現(xiàn)，下載進(jìn)度條的代碼實(shí)例
本篇文章主要介紹了HTML5+CSS3網(wǎng)頁(yè)加載進(jìn)度條的實(shí)現(xiàn)，下載進(jìn)度條的代碼實(shí)例，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-30- 用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等樣式就可以完成一個(gè)時(shí)尚進(jìn)度條,這里我們來(lái)看幾個(gè)CSS3制作彩色進(jìn)度條樣式的代碼2016-06-23
圖解CSS3制作圓環(huán)形進(jìn)度條的實(shí)例教程
圓環(huán)形進(jìn)度條制作的基本思想還是畫(huà)出基本的弧線(xiàn)圖形,然后CSS3中我們可以控制其旋轉(zhuǎn)來(lái)串聯(lián)基本圖形,制造出部分消失的效果,下面就來(lái)帶大家學(xué)習(xí)圖解CSS3制作圓環(huán)形進(jìn)度條的實(shí)2016-05-26html5+css3進(jìn)度條倒計(jì)時(shí)動(dòng)畫(huà)特效代碼【推薦】
下面小編就為大家分享一篇html5+css3進(jìn)度條倒計(jì)時(shí)動(dòng)畫(huà)特效代碼【推薦】。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-03-08可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條分享
這篇文章主要介紹了可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條，文章最后有下載地址,需要的朋友可以參考下2014-04-11CSS3實(shí)現(xiàn)的閃爍跳躍進(jìn)度條示例(附源碼)
原理是通過(guò)大量的css3屬性來(lái)實(shí)現(xiàn)的，如：animation、transform、keyframes等等屬性，示例采用了結(jié)構(gòu)性偽類(lèi)選擇符E:nth-child(n)，來(lái)進(jìn)行對(duì)HTML元素的選擇以及控制輸出，感2013-08-19css3閃亮進(jìn)度條效果實(shí)現(xiàn)思路及代碼
進(jìn)度條而且還是帶有閃亮，不可思議吧，看下效果圖，至于實(shí)現(xiàn)代碼，感興趣的前端設(shè)計(jì)者可以參考下哈，或許有所意想不到的收獲2013-04-17純CSS3編寫(xiě)的的精美動(dòng)畫(huà)進(jìn)度條(無(wú)flash/無(wú)圖像/無(wú)腳本/附源碼)
加載動(dòng)畫(huà)和進(jìn)度條的真正目的是讓用戶(hù)了解任務(wù)的進(jìn)度，有很多的基于JavaScript的動(dòng)畫(huà)，但我決定切換到CSS3,使用純CSS：沒(méi)有flash，沒(méi)有圖像，沒(méi)有腳本2013-01-07css3制作動(dòng)態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示
今天就為大家分享一個(gè)利用css3制作動(dòng)態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示,其效果對(duì)比f(wàn)lash來(lái)說(shuō)卻毫不遜色，有一個(gè)精致的動(dòng)畫(huà)進(jìn)度條，上面還有當(dāng)前進(jìn)度的百分比數(shù)字顯示，2012-12-13
