SVG: Loading...

In this example below you will see how to do a SVG: Loading... with some HTML / CSS and Javascript

Forked to experiment with "symbol" & "use". The original graphics do not lend themselves to concise manipulation as I would have liked due to the way the 'Orbit' component is structured. Nevertheless I did get a chance to practice duplicating the 'Electron' using .

Thumbnail
This awesome code was written by Ace-Nectar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ace-Nectar ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG:  Loading...</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  background: #111c21/*#131B1E/*#0E151A*/;
}
svg {
  position: relative;
  height: 100%;
  width: 100%;
}
#atom{
  animation: atom 1s infinite;  
}
@keyframes atom {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
#electron{
  animation: electron 3s infinite;  
}
@keyframes electron {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
#quark{
  animation: quark 8s infinite;  
}
@keyframes quark {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
#boson{
  animation: boson 13s infinite;  
}
@keyframes boson {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  
<svg viewBox="0 0 200 200" width="200" height="200">  
 <defs>
   <symbol id="atom" viewBox="0 0 200 200"> 
  <g transform=" matrix(0.866, 0.5, 0.25, 0.433, 80, 80)" >  
     
    
 <!--Electron Graphic & SMIL Animation-->   
    <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#BAE1FF" stroke="none" opacity="0.3">
     <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="-360 0 0" dur="1s" repeatCount="indefinite" />
    </path>
  </g>

  </defs>  

<!--We place the circle at the 'bottom'-->
<circle cx="100" cy="100" r="13" stroke-width="0.75" fill="none" stroke="plum" opacity="0.15"/>

  <g id="atom"> 
    <circle cx="120" cy="112" r="1" fill="#BAE1FF" opacity="0.5"/>   
    </g>
   


<g id="electron" transform="scale(0.5,-0.5)">  

  <svg width="100%" height="100%" x="57%" y="-133%">
   <use xlink:href="#atom" width="200" height="200"/>
  </svg> 
</g>
   
 
 <g id="boson" transform="translate(5,10)">  
   <g transform="rotate(90)">  
     <g transform="scale(0.5,0.5)">  
       <svg width="100%" height="100%" x="57%" y="-139%">
           <use xlink:href="#atom" width="200" height="200"/>
        </svg> 
     </g>
   </g>
 </g> 


<g id="quark" transform="translate(230,95)">  
  <g transform="rotate(45)">
    <g transform="scale(-0.5,-0.5)">     
       <svg width="100%" height="100%"x="57%"y="-139%">
            <use xlink:href="#atom"width="200"height="200"/>
       </svg> 
     </g>
  </g>
</g>   
 

  <animateTransform attributeName="transform" 
type="rotate"
from="-360 100 100"
to="0 100 100" 
dur="2s"
repeatCount="indefinite" />
</g>  
</svg>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ace-Nectar/svg-loading-ENMLGN */
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  background: #111c21/*#131B1E/*#0E151A*/;
}
svg {
  position: relative;
  height: 100%;
  width: 100%;
}
#atom{
  animation: atom 1s infinite;  
}
@keyframes atom {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
#electron{
  animation: electron 3s infinite;  
}
@keyframes electron {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
#quark{
  animation: quark 8s infinite;  
}
@keyframes quark {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}
#boson{
  animation: boson 13s infinite;  
}
@keyframes boson {  
  0%, 100% {opacity:1;}
  50% {opacity:0;}
}

/*Downloaded from https://www.codeseek.co/Ace-Nectar/svg-loading-ENMLGN */
//Concept for loading signal

Comments