This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
Enhancement: Use SMIL animated svg ajax loader graphic. #7018
Closed
Description
SMIL animation is supported by many of the target platforms:
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>