Skip to content

Instantly share code, notes, and snippets.

@AlexandreBroudin

AlexandreBroudin/loader

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlexandreBroudin/9197840 to your computer and use it in GitHub Desktop.
Save AlexandreBroudin/9197840 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
loader
<svg width="76px" height="16px" xmlns="http://www.w3.org/2000/svg">
<g id="loader" >
<circle cx="10" cy="10" r="5" stroke="#FFFFFF" stroke-width="2" fill="#1985D3" opacity="0">
<animate id="Circle1" attributeName="opacity" from="0" to="1" dur=".3s" begin=".3s; Circle4.end" fill="freeze"/>
<animate attributeName="opacity" from="1" to="0" dur=".3s" begin="Circle4.end" />
</circle>
<circle cx="30" cy="10" r="5" stroke="#FFFFFF" stroke-width="2" fill="#F75562" opacity="0">
<animate id="Circle2" attributeName="opacity" from="0" to="1" dur=".3s" begin="Circle1.end" fill="freeze" />
<animate attributeName="opacity" from="1" to="0" dur=".3s" begin="Circle4.end" />
</circle>
<circle cx="50" cy="10" r="5" stroke="#FFFFFF" stroke-width="2" fill="#6FBC46" opacity="0">
<animate id="Circle3" attributeName="opacity" from="0" to="1" dur=".3s" begin="Circle2.end" fill="freeze" />
<animate attributeName="opacity" from="1" to="0" dur=".3s" begin="Circle4.end" />
</circle>
<circle cx="70" cy="10" r="5" stroke="#FFFFFF" stroke-width="2" fill="#FBE300" opacity="0">
<animate id="Circle4" attributeName="opacity" from="0" to="1" dur=".3s" begin="Circle3.end" fill="freeze" />
<animate attributeName="opacity" from="1" to="0" dur=".3s" begin="Circle4.end" />
</circle>
</g>
</svg>
@eQRoeil
Copy link

eQRoeil commented Feb 25, 2014

peut-être quelquechose comme ça ?

<svg width="76px" height="16px" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<g>
<circle cx="10" cy="10" r="5" stroke="#FFFFFF" stroke-width="3" fill="#1985D3" opacity="0">
<animate id="Circle1" attributeName="opacity" values="0;1;.1" dur="4s" begin="0s;Circle4.begin+2800ms"/>
</circle>
<circle cx="30" cy="10" r="5" stroke="#FFFFFF" stroke-width="3" fill="#F75562" opacity="0">
<animate id="Circle2" attributeName="opacity" values="0;1;.1" dur="3600ms" begin="Circle1.begin+400ms"  />
</circle>
<circle cx="50" cy="10" r="5" stroke="#FFFFFF" stroke-width="3" fill="#6FBC46" opacity="0">
<animate id="Circle3" attributeName="opacity" values="0;1;.1" dur="3200ms" begin="Circle1.begin+800ms"  />
</circle>
<circle cx="70" cy="10" r="5" stroke="#FFFFFF" stroke-width="3" fill="#FBE300" opacity="0" >
<animate id="Circle4" attributeName="opacity" values="0;1;.1" dur="2800ms" begin="Circle1.begin+1200ms"  />
</circle>
</g>
</svg>

@AlexandreBroudin
Copy link
Author

Ha oui pas mal, du coup tu joue avec les values, j'ai update le miens en jouant plutot avec une autre animation. mais je garde ton code de coté, merci à toi :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment