/*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/5506(这个备注仅在演示页面有，源代码里没有)*//** * Inspiration for this project found at: * https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart * 1. The `reverse` animation direction plays the animation backwards *    which makes it start at the stroke offset 100 which means displaying *    no stroke at all and animating it to the value defined in the SVG *    via the inline `stroke-dashoffset` attribute. * 2. Rotate by -90 degree to make the starting point of the *    stroke the top of the circle. * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer *    and Edge, use the transform attribute directly on the SVG element as a * .  workaround. */.circle-chart {  width: 150px;  height: 150px;}.circle-chart__circle {  stroke: #c79153;  stroke-width: 2;  stroke-linecap: square;  fill: none;  animation: circle-chart-fill 2s reverse; /* 1 */   transform: rotate(-90deg); /* 2, 3 */  transform-origin: center; /* 4 */}/** * 1. Rotate by -90 degree to make the starting point of the *    stroke the top of the circle. * 2. Scaling mirrors the circle to make the stroke move right *    to mark a positive chart value. * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer *    and Edge, use the transform attribute directly on the SVG element as a * .  workaround. */.circle-chart__circle--negative {  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */}.circle-chart__background {  stroke: #efefef;  stroke-width: 2;  fill: none; }.circle-chart__info {  animation: circle-chart-appear 2s forwards;  opacity: 0;  transform: translateY(0.3em);  fill: #c79153;}.circle-chart__percent {  alignment-baseline: central;  text-anchor: middle;  font-size: 8px;}.circle-chart__subline {    alignment-baseline: central;    text-anchor: middle;    font-size: 3px;}.success-stroke {  stroke: #c79153;}.warning-stroke {  stroke: #c79153;}.danger-stroke {  stroke: #c79153;}@keyframes circle-chart-fill {  to { stroke-dasharray: 0 100; }}@keyframes circle-chart-appear {  to {    opacity: 1;    transform: translateY(0);  }}/*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/5506(这个备注仅在演示页面有，源代码里没有)*/