.circliful .outer {
fill: transparent;
stroke: #333;
stroke-width: 19.8;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running; -moz-transform: rotate(-89deg) translateX(-190px);
} .circliful .inner {
fill: transparent;
stroke: orange;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running; -moz-transform: rotate(-89deg) translateX(-190px);
stroke-dashoffset: 0;
}
.circliful {
overflow: visible !important;
}
.svg-container {
width: 100%;
margin: 0 auto;
overflow: visible;
position: relative;
}
svg .icon {
font-family: FontAwesome;
}
.legend-line {
white-space: nowrap;
}
.color-box {
width: 15px;
height: 15px;
border-radius: 2px;
display: inline-block;
float: left;
padding-top: 3px;
margin: 2px 5px 0 0;
}.give-skeleton{animation:give-skeleton-loading 1s linear infinite alternate;display:inline-block;position:relative;top:.1rem}@keyframes give-skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}