Site Notice

hello, world

Difference between revisions of "Svg loading"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
([InPageEdit] 没有编辑摘要 (编辑自Special:Diff/1622))
Tag: Replaced
Line 1: Line 1:
−
{{#vardefine:svg|<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)">
Line 36: Line 36:
 
   </style>
 
   </style>
 
</svg>
 
</svg>
−
</html>}}
+
</html>
−
{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}
 

Revision as of 21:04, 5 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>

Retrieved from "https://common.epb.wiki/index.php?title=Svg_loading&oldid=1717"