“Html:Svg loading”的版本间的差异
来自小鱼君和他的朋友们
（[InPageEdit] 没有编辑摘要） |
（[InPageEdit] 没有编辑摘要） |
||
| 第1行： | 第1行： | ||
| − | + | {{#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 id="group" style="" transform="translate(26,26)"> | ||
| − | <circle data-status="doMinus" r="20" stroke="#33a0fb" stroke-width="6" stroke-dasharray=" | + | <circle data-status="doMinus" r="20" stroke="{{{color|#33a0fb}}}" stroke-width="6" stroke-dasharray="126 1000" fill="transparent" cx="0" cy="0"></circle> |
</g> | </g> | ||
<style> | <style> | ||
.svgspinner circle { | .svgspinner circle { | ||
animation: circle-spin 1.8s infinite linear; | animation: circle-spin 1.8s infinite linear; | ||
| + | transition: stroke-dasharray .2s linear; | ||
} | } | ||
@keyframes circle-spin { | @keyframes circle-spin { | ||
| 第20行： | 第21行： | ||
var startSpin = setInterval(function () { | var startSpin = setInterval(function () { | ||
var $this = $('.svgspinner circle'), | var $this = $('.svgspinner circle'), | ||
| − | |||
dash = $this.attr('stroke-dasharray'), | dash = $this.attr('stroke-dasharray'), | ||
dash1 = Number(dash.split(' ')[0]), | dash1 = Number(dash.split(' ')[0]), | ||
| 第39行： | 第39行： | ||
</script> | </script> | ||
</svg> | </svg> | ||
| − | + | }} | |
2019年12月3日 (二) 01:39的版本
