数据百分比陷入困境

Question

For some reason the data-percent does not react to any value. It gets stuck at 87%.

PHP

<ul class="progress">
            <!--  Item  -->
            <li data-name="HTML & CSS" data-percent="87%"> <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="2" transform="translate(100,100)">
              <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
              <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
              <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
              <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
              <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
              <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
            </g>
            </svg> <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path>
            </svg> </li>
        </ul>

        <!--  Defining Angle Gradient Colors  --> 
        <svg width="0" height="0">
        <defs>
        <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
        <stop stop-color="#618099"/>
        <stop offset="100%" stop-color="#8e6677"/>
        </linearGradient>
        <linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
        <stop stop-color="#8e6677"/>
        <stop offset="100%" stop-color="#9b5e67"/>
        </linearGradient>
        <linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
        <stop stop-color="#9b5e67"/>
        <stop offset="100%" stop-color="#9c787a"/>
        </linearGradient>
        <linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
        <stop stop-color="#9c787a"/>
        <stop offset="100%" stop-color="#817a94"/>
        </linearGradient>
        <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop stop-color="#817a94"/>
        <stop offset="100%" stop-color="#498a98"/>
        </linearGradient>
        <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
        <stop stop-color="#498a98"/>
        <stop offset="100%" stop-color="#618099"/>
        </linearGradient>
        </defs>
        </svg>

CSS

/* Progress *//* Load animation */

@-webkit-keyframes 
load { 0% {
stroke-dashoffset:0
}
}
@-moz-keyframes 
load { 0% {
stroke-dashoffset:0
}
}
@keyframes 
load { 0% {
stroke-dashoffset:0
}
}

.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
  overflow: visible;
  box-shadow: none;
  background-image: none;
  background-color: transparent;
}

svg:not(:root) {
  overflow: visible
}

/* Item */

.progress>li {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #93A2AC;
  font-family: Lato;
  font-weight: 100;
  margin: 2rem;
}

.progress>li:before {
  content: attr(data-name);
  position: absolute;
  width: 100%;
  bottom: -2rem;
  font-weight: 400;
}

.progress>li:after {
  content: attr(data-percent);
  position: absolute;
  width: 100%;
  top: 3.7rem;
  left: 0;
  font-size: 2rem;
  text-align: center;
}

.progress svg {
  width: 10rem;
  height: 10rem;
}

.progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

.progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 10;
  stroke-dasharray: 600;
  stroke: rgba(249, 249, 249, 1);
  -webkit-animation: load 5s;
  -moz-animation: load 5s;
  -o-animation: load 5s;
  animation: load 5s;
}

I have tried changing the value several times, also tried to delete some of the code. But nothing seems to help.

Could you please help me out?

Jsfiddle

Answer 1

The length of your circle path is 628.407.

So your dasharray and your dashoffset have to match that. You were using a dasharray of 600 and a dashoffset of 547.

If you change both to 629. The progress meter will complete.

<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>

.progress svg:nth-child(2) path {
  ...
  stroke-dasharray: 629;
  ...
}

http://jsfiddle.net/vqpejxLk/1/

If you want a percentage, multiply it by 629. So 50% would be 314.5, etc.