• 注册账号来帮忙上传丢失的图片!
  • MediaWiki 1.33.0 升级大失败! 哦你数据库炸咯! 网站正在加急恢复中……
  • 站长表示:又双叒叕把自己的wiki搞炸了, 我就像一道高数题 我太难了 ……

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

来自小鱼君和他的朋友们
([InPageEdit] 没有编辑摘要)
 
([InPageEdit] 没有编辑摘要)
 
(未显示同一用户的7个中间版本)
第1行: 第1行:
<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="#33a0fb" stroke-width="6" stroke-dasharray="120 1000" fill="transparent" style="transition: stroke-dasharray .2s linear" 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;
 +
  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'),
 
   $class = $this.attr('class'),
 
   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>
</html>
+
}}

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