Site Notice
hello, world
Difference between revisions of "Svg loading"
From Project-EPB Commons
([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" height="45px" width="45px"> | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" height="45px" width="45px"> | ||
| − | <g class="spingroup" transform="translate(22.5,22.5)"> | + | <g class="spingroup" transform="translate(22.5,22.5)"> |
| − | <circle class="spincircle" r="20" stroke-width="5" stroke="#088488" fill="none" | + | <circle class="spincircle" r="20" stroke-width="5" stroke="#088488" fill="none" /> |
| − | </g> | + | </g> |
| − | <style>.svgspinner .spincircle { | + | <style> |
| − | + | .svgspinner .spincircle { | |
| − | + | animation: loading-round 1.2s infinite linear, loading-dash 3s infinite linear; | |
| − | + | stroke-dasharray: 126; | |
| − | } | + | stroke-linecap: round; |
| − | @keyframes loading-round { | + | } |
| − | + | ||
| − | + | @keyframes loading-round { | |
| − | + | 0% { | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | ||
| − | } | + | 100% { |
| − | @keyframes loading-dash { | + | transform: rotate(720deg); |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | @keyframes loading-dash { | |
| − | + | 0% { | |
| − | + | stroke-dashoffset: 126; | |
| − | + | } | |
| − | + | ||
| − | + | 50% { | |
| − | }</style> | + | stroke-dashoffset: 0; |
| + | } | ||
| + | |||
| + | 100% { | ||
| + | stroke-dashoffset: 126; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
</svg> | </svg> | ||
</html> | </html> | ||
Revision as of 15:16, 3 December 2019
<html> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" height="45px" width="45px">
<g class="spingroup" transform="translate(22.5,22.5)">
<circle class="spincircle" r="20" stroke-width="5" stroke="#088488" fill="none" />
</g>
<style>
.svgspinner .spincircle {
animation: loading-round 1.2s infinite linear, loading-dash 3s infinite linear;
stroke-dasharray: 126;
stroke-linecap: round;
}
@keyframes loading-round {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(720deg);
}
}
@keyframes loading-dash {
0% {
stroke-dashoffset: 126;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 126;
}
}
</style>
</svg> </html>
