多彩进度条效果-html代码-BFW代码库

多彩进度条效果

代码语言：html

所属分类：进度条

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

    <style>
@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

/* Basic resets */

* { 
	margin:0; padding:0; 
	box-sizing: border-box;
}

body {
margin: 50px auto 0;
max-width: 800px;

font-family: "Expletus Sans", sans-serif;
}

li {

	width: 50%;
	float: left;
	list-style-type: none;

	padding-right: 5.3333333%;
}

li:nth-child(even) { margin-bottom: 5em;}

h2 {
	margin: 0 0 1.5em;
	border-bottom: 1px solid #ccc;

	padding: 0 0 .25em;
}

/* Styling an indeterminate progress bar */

progress:not(value) {
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
	/* Get rid of the default appearance */
	appearance: none;

	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;

	/* Add dimensions */
	width: 100%; height: 20px;

	/* Although fir.........完整代码请登录后点击上方下载按钮下载查看