用jQuery+html+css实现带彩色进度条样

来源：互联网 2023-03-16 23:54:15 版权归原作者所有，如有侵权，请联系我们

用jQuery html css实现带彩色进度条样

工具/原料

adobe dreamweaver

方法/步骤

新建html。

用jQuery html css实现带彩色进度条样

书写html

div class="htmleaf-content">

h3 class="center">基本进度条/h3>

div id="progressbar1">/div>

h3 class="center">控制进度条的颜色/h3>

div id="progressbar2">/div>

h3 class="center">控制进度条的高度/h3>

div id="progressbar3">/div>

h3 class="center">控制进度条的圆角/h3>

div id="progressbar4">/div>

/div>

用jQuery html css实现带彩色进度条样

书写css样式

style>

body, html { font-size: 100%; padding: 0; margin: 0; }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

body { background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }

a { color: rgba(255, 255, 255, 0.6); outline: none; text-decoration: none; -webkit-transition: 0.2s; transition: 0.2s; }

a:hover, a:focus { color: #74777b; text-decoration: none; }

.htmleaf-container { margin: 0 auto; }

.htmleaf-content { width: 600px; margin: 50px auto; }

.center { text-align: center; }

.progressbar { width: 100%; margin-top: 5px; margin-bottom: 35px; position: relative; background-color: #EEEEEE; box-shadow: inset 0px 1px 1px rgba(0,0,0,.1); }

.proggress { height: 8px; width: 10px; background-color: #3498db; }

.percentCount { float: right; margin-top: 10px; clear: both; font-weight: bold; font-family: Arial }

/style>

用jQuery html css实现带彩色进度条样