progress

by basecss

HTML

<!-- large -->
<h2>large</h2>
<div class="progress progress-lg" style="width:500px;">
	<input type="range" min="0" max="100" value="80">
</div>
<div class="progress progress-lg" style="width:800px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-lg" style="width:1000px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-lg" style="width:100%;">
	<input type="range" min="0" max="100">
</div>
<!-- default -->
<h2>default</h2>
<div class="progress" style="width:500px;">
	<input type="range" min="0" max="100" value="10">
</div>
<div class="progress" style="width:800px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress" style="width:1000px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress" style="width:100%;">
	<input type="range" min="0" max="100" value="10">
</div>
<!-- small -->
<h2>small</h2>
<div class="progress progress-sm" style="width:500px;">
	<input type="range" min="0" max="100" value="30">
</div>
<div class="progress progress-sm" style="width:800px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-sm" style="width:1000px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-sm" style="width:100%;">
	<input type="range" min="0" max="100" value="80">
</div>
<!-- x small -->
<h2>x small</h2>
<div class="progress progress-xs" style="width:500px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-xs" style="width:800px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-xs" style="width:1000px;">
	<input type="range" min="0" max="100">
</div>
<div class="progress progress-xs" style="width:100%;">
	<input type="range" min="0" max="100" value="65">
</div>
<script src="http://common.qiniudn.com/jquery-1.10.2.min.js"></script>
<script src="http://common.qiniudn.com/progress.min.js"></script>

CSS

body {
	margin: 0;
	padding: 30px;
	background: #FFF;
	font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;
}
h2 {
	padding: .5em 0;
	margin: 20px 0 0 0;
	font-size: 3em;
	border-bottom: 1px solid #eee;
	background: #f6f6f6;
}
pre {
	border: 1px dashed #CCC;
	border-radius: 3px;
	padding: 10px;
	line-height: 24px;
	font-size: 14px;
	background: #f8f8f8;
}
.progress {
	position: relative;
	margin-top: 50px;
}
.progress input[type=range] {
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #eee;
	background-image: -webkit-linear-gradient(left, #7ed43f, #7ed43f);
	background-image: -moz-linear-gradient(left, #7ed43f, #7ed43f);
	background-image: -o-linear-gradient(left, #7ed43f, #7ed43f);
	background-repeat: no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0 none;
}
/*进度条按钮*/
.progress input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
	background-color: #7ed43f;
	border-radius: 100%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
	cursor: pointer;
	overflow: hidden;
}
.progress input[type=range]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
	background: #7ed43f;
	border-radius: 100%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
	cursor: pointer;
	overflow: hidden;
}
/*default*/
.progress input[type=range] {
	height: 16px;
	border-radius: 8px;
}
.progress input[type=range]::-webkit-slider-thumb {
	padding: 6px;
	border: 7px solid #FFF;
}
.progress input[type=range]::-moz-range-thumb {
	padding: 6px;
	border: 7px solid #FFF;
}
.progress input[type=range]::-moz-range-track {
	border: 0 none;
	height: 16px;
	background-color: transparent;
	border-radius: 8px;
}
/*large*/
.progress-lg input[type=range] {
	height: 20px;
	border-radius: 10px;
}
.progress-lg input[type=range]::-webkit-slider-thumb {
	padding: 8px;
	border: 10px solid #FFF;
}
.progress-lg...