• 正在查找将来过去时的官方设定集?不如看看万界大百科吧!
  • 《将来过去时》第一部分 现在 魔科纪元的少年少女 即将正式发布!
  • 让我偷偷看一眼小鱼君的博客……
  • 服务器已成功迁移到 阿里云(杭州)

“Html:Svg loading”的版本间的差异

来自小鱼君和他的朋友们
([InPageEdit] 没有编辑摘要)
([InPageEdit] 没有编辑摘要)
 
(未显示同一用户的6个中间版本)
第1行: 第1行:
 
{{#tag:html|
 
{{#tag:html|
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" width="52px" height="52px">
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" width="52px" height="52px">
<g id="group" style="" transform="translate(26,26)">
+
<g transform="translate(26,26)">
<circle data-status="doMinus" r="20" stroke="{{{color|#33a0fb}}}" stroke-width="6" stroke-dasharray="126 1000" fill="transparent" cx="0" cy="0"></circle>
+
<circle r="20" stroke="#33a0fb" stroke-width="6" fill="none"></circle>
 
</g>
 
</g>
 
<style>
 
<style>
 
.svgspinner circle {
 
.svgspinner circle {
   animation: circle-spin 1.8s infinite linear;
+
   animation: circle-spin 3s infinite linear;
   transition: stroke-dasharray .2s linear;
+
   stroke-dasharray: 126;
 +
  stroke-linecap: round;
 
}
 
}
 
@keyframes circle-spin {
 
@keyframes circle-spin {
   from {
+
   0% {
 
    transform: rotate(0deg);
 
    transform: rotate(0deg);
 +
   stroke-dashoffset: 124;
 
   }
 
   }
   to {
+
   50% {
    transform: rotate(720deg);
+
   stroke-dashoffset: 0;
 +
  }
 +
  100% {
 +
    transform: rotate(1080deg);
 +
   stroke-dashoffset: 124;
 
   }
 
   }
 
}
 
}
 
</style>
 
</style>
<script>
 
var startSpin = setInterval(function () {
 
  var $this = $('.svgspinner circle'),
 
   dash = $this.attr('stroke-dasharray'),
 
   dash1 = Number(dash.split(' ')[0]),
 
   dash2;
 
  if (dash1 > 126) {
 
   $this.attr('data-status', 'doMinus');
 
  } else if (dash1 < 4) {
 
   $this.attr('data-status', 'doPlus');
 
  }
 
  if ($this.attr('data-status') === 'doMinus') {
 
   dash2 = dash1 - 12;
 
   $this.attr('stroke-dasharray', dash2 + ' 1000');
 
  } else if ($this.attr('data-status') === 'doPlus') {
 
   dash2 = dash1 + 12;
 
   $this.attr('stroke-dasharray', dash2 + ' 1000');
 
  }
 
}, 200);
 
</script>
 
 
</svg>
 
</svg>
 
}}
 
}}

2019年12月3日 (二) 03:33的最新版本