“Html:Svg loading”的版本间的差异
来自小鱼君和他的朋友们
（[InPageEdit] 没有编辑摘要） |
（[InPageEdit] 没有编辑摘要） |
||
| 第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 id="group" style="" transform="translate(26,26)"> | ||
| − | <circle data-status="doMinus" r="20" stroke=" | + | <circle data-status="doMinus" r="20" stroke="#33a0fb" stroke-width="6" fill="transparent" cx="0" cy="0"></circle> |
</g> | </g> | ||
<style> | <style> | ||
.svgspinner circle { | .svgspinner circle { | ||
| − | animation: circle-spin | + | animation: circle-spin 3s infinite linear; |
| − | + | stroke-dasharray: 126; | |
| + | stroke-dashoffset: 126; | ||
} | } | ||
@keyframes circle-spin { | @keyframes circle-spin { | ||
0% { | 0% { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
| + | stroke-dashoffset: 126; | ||
| + | } | ||
| + | 50% { | ||
| + | stroke-dashoffset: 6; | ||
} | } | ||
100% { | 100% { | ||
| − | transform: rotate( | + | transform: rotate(1080deg); |
| + | stroke-dashoffset: 126; | ||
} | } | ||
} | } | ||
</style> | </style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</svg> | </svg> | ||
}} | }} | ||
2019年12月3日 (二) 02:08的版本
