数据百分比陷入困境

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

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.