Site Notice

hello, world

Difference between revisions of "Svg loading"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
([InPageEdit] 没有编辑摘要)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
−
{{#vardefine:svg|<html>
+
There are a lot of loading animations that look great. But it is difficult to insert them into wiki article. And GIF picture quality is often poor. So I made these SVG files.
−
<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 {
+
Most of them were not designed by publisher, I just imitated their effects using SVG. So if some of them violate copyright, please remind publisher to delete them.
−
      0% {
 
−
        transform: rotate(0deg);
 
−
      }
 
  
−
      100% {
+
== Fandom design ==
−
        transform: rotate(720deg);
+
Imitated by: [[User:机智的小鱼君]]
−
      }
+
<div style="text-align:center;margin:0 auto;"><img src="https://vignette.wikia.nocookie.net/dftest/images/c/c0/Loading.svg"><br/>What's that! Animated SVG!! COOOOL!!!</div>
−
    }
+
* <nowiki>https://vignette.wikia.nocookie.net/dftest/images/c/c0/Loading.svg</nowiki>
  
−
    @keyframes loading-dash {
+
Copyright Fandom, inc<ref>https://fandomdesignsystem.com/components/progress-indicators</ref>
−
      0% {
 
−
        stroke-dashoffset: 126;
 
−
      }
 
  
−
      50% {
+
== Microsoft style ==
−
        stroke-dashoffset: 0;
+
These 3 Microsoft style SVG files were imitated by: [[User:机智的小鱼君]]
−
      }
+
<div style="text-align:center;margin:0 auto;"><img src="https://vignette.wikia.nocookie.net/dftest/images/8/8c/Ms-loading-spinner.svg"><br/>Normal</div>
 +
* <nowiki>https://vignette.wikia.nocookie.net/dftest/images/8/8c/Ms-loading-spinner.svg</nowiki>
  
−
      100% {
+
<div style="background:#000;color:#fff;text-align:center;width:45px;margin:0 auto;border-radius:2px;padding: 4px;"><img src="https://vignette.wikia.nocookie.net/dftest/images/c/c3/Ms-loading-spinner-white.svg"><br/>White</div>
−
        stroke-dashoffset: 126;
+
* <nowiki>https://vignette.wikia.nocookie.net/dftest/images/c/c3/Ms-loading-spinner-white.svg</nowiki>
−
      }
+
 
−
    }
+
<div style="text-align:center;margin:0 auto;"><img src="https://vignette.wikia.nocookie.net/dftest/images/0/07/Ms-loading-spinner-black.svg"><br/>Black</div>
−
  </style>
+
* <nowiki>https://vignette.wikia.nocookie.net/dftest/images/0/07/Ms-loading-spinner-black.svg</nowiki>
−
</svg>
+
 
−
</html>}}
+
Copyright Microsoft, corp
−
{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}{{#var:svg}}
+
 
 +
== Google Material ==
 +
'''TBD'''
 +
 
 +
== References ==
 +
<references/>

Latest revision as of 04:52, 16 December 2019

There are a lot of loading animations that look great. But it is difficult to insert them into wiki article. And GIF picture quality is often poor. So I made these SVG files.

Most of them were not designed by publisher, I just imitated their effects using SVG. So if some of them violate copyright, please remind publisher to delete them.

Fandom design

Imitated by: User:机智的小鱼君

<img src="https://vignette.wikia.nocookie.net/dftest/images/c/c0/Loading.svg">
What's that! Animated SVG!! COOOOL!!!
  • https://vignette.wikia.nocookie.net/dftest/images/c/c0/Loading.svg

Copyright Fandom, inc[1]

Microsoft style

These 3 Microsoft style SVG files were imitated by: User:机智的小鱼君

  • https://vignette.wikia.nocookie.net/dftest/images/8/8c/Ms-loading-spinner.svg
  • https://vignette.wikia.nocookie.net/dftest/images/c/c3/Ms-loading-spinner-white.svg
  • https://vignette.wikia.nocookie.net/dftest/images/0/07/Ms-loading-spinner-black.svg

Copyright Microsoft, corp

Google Material

TBD

References

  1. ↑ https://fandomdesignsystem.com/components/progress-indicators
Retrieved from "https://common.epb.wiki/index.php?title=Svg_loading&oldid=1843"