首先， counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上，它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），counter-reset还可以同时声明多个计数器比如：
counter-reset: count 0 /*标识计数器count从1开始*/
counter-reset: count2 2 /*标识计数器count2 从3开始*/
counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器，count1，count2，count3*/
counter-increment 表明计数器实际用到的范围 。他的值也包括两部分：第一个为计数器的名字，即counter-reset设置好的名字，第二个值标识递增的值（默认为1），比如：
counter-increment: count 1 /*表明每次递增 1*/
counter-increment：count 2 /*表明每次递增 2*/
最后一个，content和counter搭配使用，content主要是跟 :after, :before,::after,::before来搭配用的，counter主要是给元素插入计数器的值。
整体例子如下：
<dl>
<dt>example</dt>
<dd>example</dd>
<dd>example</dd>
<dd>example</dd>
<dt>example2</dt>
<dd>example2</dd>
<dd>example2</dd>
<dd>example2</dd>
<dd>example2</dd>
</dl>
dl { counter-reset:test1 0}
dt { counter-increment: test1counter-reset: test2 0}
dt:before{ content:counter(test1)"、"}
dd{ counter-increment:test2}
dd:before{
content:counter(test1)"-"counter(test2)"、"
}
<div class="wrapper"><div class="load-bar">
<div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
</div>
<h1>Loading</h1>
<p>Please wait...</p>
</div> * {
box-sizing: border-box
}
html {
height: 100%
}
body {
background: #efeeea
background: linear-gradient(#f9f9f9, #cecbc4)
background: -moz-linear-gradient(#f9f9f9, #cecbc4)
background: -webkit-linear-gradient(#f9f9f9, #cecbc4)
background: -o-linear-gradient(#f9f9f9, #cecbc4)
color: #757575
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
text-align: center
}
h1, p {
padding:0 margin:0
}
.wrapper {
width: 350px
margin: 200px auto
}
.wrapper p a {color:#757575 text-decoration:none}
.wrapper .load-bar {
width: 100%
height: 25px
border-radius: 30px
background: #dcdbd7
position: relative
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2)
}
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
animation-play-state: paused
-moz-animation-play-state: paused
-o-animation-play-state: paused
-webkit-animation-play-state: paused
}
.wrapper .load-bar-inner {
height: 99%
width: 0%
border-radius: inherit
position: relative
background: #c2d7ac
background: linear-gradient(#e0f6c8, #98ad84)
background: -moz-linear-gradient(#e0f6c8, #98ad84)
background: -webkit-linear-gradient(#e0f6c8, #98ad84)
background: -o-linear-gradient(#e0f6c8, #98ad84)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3)
animation: loader 10s linear infinite
-moz-animation: loader 10s linear infinite
-webkit-animation: loader 10s linear infinite
-o-animation: loader 10s linear infinite
}
.wrapper #counter {
position: absolute
background: #eeeff3
background: linear-gradient(#eeeff3, #cbcbd3)
background: -moz-linear-gradient(#eeeff3, #cbcbd3)
background: -webkit-linear-gradient(#eeeff3, #cbcbd3)
background: -o-linear-gradient(#eeeff3, #cbcbd3)
padding: 5px 10px
border-radius: 0.4em
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1)
left: -25px
top: -50px
font-size: 12px
font-weight: bold
width: 44px
animation: counter 10s linear infinite
-moz-animation: counter 10s linear infinite
-webkit-animation: counter 10s linear infinite
-o-animation: counter 10s linear infinite
}
.wrapper #counter:after {
content: ""
position: absolute
width: 8px
height: 8px
background: #cbcbd3
transform: rotate(45deg)
-moz-transform: rotate(45deg)
-webkit-transform: rotate(45deg)
-o-transform: rotate(45deg)
left: 50%
margin-left: -4px
bottom: -4px
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1)
border-radius: 0 0 3px 0
}
.wrapper h1 {
font-size: 28px
padding: 20px 0 8px 0
}
.wrapper p {
font-size: 13px
}
@keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@-moz-keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@-webkit-keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@-o-keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
@-moz-keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
@-webkit-keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
@-o-keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
