原来的 css repeating gradient loading progress 有 bug，动画跳动不连续！

原来的代码是

background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 28px);

现在是

background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-size: 40px 40px;

关键是 background-size: 40px 40px; 无聊加入 颜色和方向变化

animation-direction 有4个值 normal reverse alternate alternate-reverse(正常、反向、来回、反向来回)

alternate-reverse 定义

The animation plays backward on the first play-through, then forward on the next, then continues to alternate. The count to determinate if it is an even or an odd iteration starts at one.