Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Enhancement: Use SMIL animated svg ajax loader graphic. #7018

Closed
peteboere opened this issue Jan 29, 2014 · 1 comment
Closed

Enhancement: Use SMIL animated svg ajax loader graphic. #7018

peteboere opened this issue Jan 29, 2014 · 1 comment

Comments

@peteboere
Copy link

SMIL animation is supported by many of the target platforms:

http://caniuse.com/svg-smil

I've been using the following as a drop in replacement, obviously a fallback strategy will be required in addition.

<svg width="46" height="46" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="100" x2="50" y2="0">
        <stop offset="0" style="stop-color:white"/>
        <stop offset="1" style="stop-opacity:0.05; stop-color:white"/>
    </linearGradient>
    <g transform="translate(3.8 3.8) scale(.39)">
        <circle cx="50" cy="50" r="58" fill="black" fill-opacity="1"></circle>
        <path stroke="black" stroke-width="1" stroke-opacity=".2" fill="url(#gradient)" d="M50.069,0.078c-27.595,0-49.966,22.371-49.966,49.966c0,27.595,22.371,49.966,49.966,49.966   s49.966-22.371,49.966-49.966C100.035,22.448,77.664,0.078,50.069,0.078z M50.01,85.062c-19.316,0-34.976-15.66-34.976-34.976   c0-19.317,15.659-34.976,34.976-34.976c19.317,0,34.977,15.659,34.977,34.976C84.987,69.401,69.327,85.062,50.01,85.062z">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" begin="0s" dur=".7s" repeatCount="indefinite"/>
        </path>
    </g>
</svg>
@jaspermdegroot
Copy link
Contributor

@peteboere

Thanks for the suggestion. Like you said, we would need a fallback for browsers that don't support SMIL, but this is something we might want to implement in a future version. I am closing this ticket for now as feature request.

@jaspermdegroot jaspermdegroot removed this from the 1.5 - 2.0 milestone May 30, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants