/*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/300(这个备注仅在演示页面有，源代码里没有)*/.percircle.dark {  background-color: #777777;}.percircle.dark .bar,.percircle.dark .fill {  border-color: #c6ff00;}.percircle.dark >span {  color: #777777;}.percircle.dark:after {  background-color: #555555;}.percircle.dark:hover >span {  color: #c6ff00;}.percircle.red .bar,.percircle.red .fill {  border-color: #dd5454;}.percircle.red:hover >span {  color: #dd5454;}.percircle.red.dark .bar,.percircle.red.dark .fill {  border-color: #f84a4a;}.percircle.red.dark:hover >span {  color: #f84a4a;}.percircle.blue .bar,.percircle.blue .fill {  border-color: #82cefa;}.percircle.blue:hover >span {  color: #82cefa;}.percircle.blue.dark .bar,.percircle.blue.dark .fill {  border-color: #20cceb;}.percircle.blue.dark:hover >span {  color: #20cceb;}.percircle.green .bar,.percircle.green .fill {  border-color: #8dea7b;}.percircle.green:hover >span {  color: #8dea7b;}.percircle.green.dark .bar,.percircle.green.dark .fill {  border-color: #a9ff3a;}.percircle.green.dark:hover >span {  color: #a9ff3a;}.percircle.orange .bar,.percircle.orange .fill {  border-color: #e88239;}.percircle.orange:hover >span {  color: #e88239;}.percircle.orange.dark .bar,.percircle.orange.dark .fill {  border-color: #dc5b00;}.percircle.orange.dark:hover >span {  color: #dc5b00;}.percircle.pink .bar,.percircle.pink .fill {  border-color: #ff8ed0;}.percircle.pink:hover >span {  color: #ff8ed0;}.percircle.pink.dark .bar,.percircle.pink.dark .fill {  border-color: #ff58b9;}.percircle.pink.dark:hover >span {  color: #ff58b9;}.percircle.purple .bar,.percircle.purple .fill {  border-color: #aa7eff;}.percircle.purple:hover >span {  color: #aa7eff;}.percircle.purple.dark .bar,.percircle.purple.dark .fill {  border-color: #7a38f7;}.percircle.purple.dark:hover >span {  color: #7a38f7;}.percircle.yellow .bar,.percircle.yellow .fill {  border-color: #dcbd00;}.percircle.yellow:hover >span {  color: #dcbd00;}.percircle.yellow.dark .bar,.percircle.yellow.dark .fill {  border-color: #ffdb00;}.percircle.yellow.dark:hover >span {  color: #ffdb00;}.rect-auto,.percircle.gt50 .slice {  clip: rect(auto, auto, auto, auto);}.pie,.percircle .bar,.gt50 .fill {  position: absolute;  border: 0.08em solid #96C619;  width: 0.84em;  height: 0.84em;  clip: rect(0, 0.5em, 1em, 0);  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -ms-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);}.bar {  -moz-backface-visibility: hidden;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;}.pie-fill,.gt50 .bar:after,.gt50 .fill {  -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg);  -ms-transform: rotate(180deg);  -o-transform: rotate(180deg);  transform: rotate(180deg);}.percircle {  position: relative;  font-size: 120px;  width: 1em;  height: 1em;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  float: left;  margin: 0 0.1em 0.1em 0;  background-color: #cccccc;}.percircle *,.percircle *:before,.percircle *:after {  -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;}.percircle.animate >span,.percircle.animate:after {  -webkit-transition: -webkit-transform 0.2s ease-in-out;  -moz-transition: -moz-transform 0.2s ease-in-out;  -ms-transition: -ms-transform 0.2s ease-in-out;  -o-transition: -o-transform 0.2s ease-in-out;  transition: transform 0.2s ease-in-out;}.percircle.animate .bar {  -webkit-transition: -webkit-transform 0.6s ease-in-out;  -moz-transition: -moz-transform 0.6s ease-in-out;  -ms-transition: -ms-transform 0.6s ease-in-out;  -o-transition: -o-transform 0.6s ease-in-out;  transition: transform 0.6s ease-in-out;}.percircle.center {  float: none;  margin: 0 auto;}.percircle.big {  font-size: 240px;}.percircle.small {  font-size: 80px;}.percircle >span {  position: absolute;  z-index: 1;  width: 100%;  top: 50%;  height: 1em;  margin-top: -0.5em;  font-size: 0.2em;  color: #071041;  display: block;  text-align: center;  white-space: nowrap;}.perclock >span {  font-size: 0.175em;}.percircle::after {  background-color: #f5f5f5;  border-radius: 50%;  content: " ";  display: block;  height: 0.84em;  left: 0.08em;  position: absolute;  top: 0.08em;  transition: all 0.4s ease 0s;  width: 0.84em;}.percircle .slice {  position: absolute;  width: 1em;  height: 1em;  clip: rect(0, 1em, 1em, 0.5em);}.percircle:hover {  cursor: default;}.percircle:hover >span {  -webkit-transform: scale(1.3);  -moz-transform: scale(1.3);  -ms-transform: scale(1.3);  -o-transform: scale(1.3);  transform: scale(1.3);  color: #307bbb;}.percircle:hover:after {  -webkit-transform: scale(1.1);  -moz-transform: scale(1.1);  -ms-transform: scale(1.1);  -o-transform: scale(1.1);  transform: scale(1.1);}/*# sourceMappingURL=percircle.css.map *//*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/300(这个备注仅在演示页面有，源代码里没有)*/