Use SVG to create a loading Animation

First, note: Because different browsers do not support SVG animation events, this loading animation has no problems in Firefox, opera, and chrome, and there are problems in IE and safari, it may not support the syntax of siml animation writing,

However, if you use canvas, there will be problems with the color gradient:

Four parameters are required for linear gradient.

　　Xstart: X coordinate of the gradient start point

Ystart: Y coordinate of the gradient start point

Xend: X coordinate of the gradient end point

Yend: Y coordinate of the gradient end point

The gradient drawn in this way can only be used for images such as Rectangles and cannot be applied in slice-shaped shapes. This loading is a circular shape and does not support radiation gradient, to achieve a linear gradient effect in a circular area, only one point and one point can be drawn.

(If you have any better solutions, please advise)

Refer:

Https://gist.github.com/bebraw/504568

Let's talk a little bit about the Code:

Image resources:

Style:

<Style type = "text/CSS">
. Loadingsvg-out
{Width: 72px; Height: 72px; margin: 0 auto; position: fixed; top: 50%; margin-top:-51px; left: 50%; margin-left: -51px ;}
</Style>

HTML code:

<Div class = "loadingsvg-out">
<SVG width = "72px" Height = "72px" viewbox = "0 0 72 72" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<! -- <Circle id = "circleloading" Cx = "35" Cy = "35" r = "34" stroke = "green" fill = "white" stroke-width = "1"> </circle> -->
<! -- <Circle Cx = "35" Cy = "35" r = "21" stroke = "Transparent" fill = "white" stroke-width = "1"> </circle> -->
<G transform = "translate (35, 35)">
<Path id = "loadingpath" d = "M-20 28 A 35 35, 0, 0, 0, 35 0 l 0 z">
<Animatetransform
Attributetype = "XML"
Attributename = "transform" type = "Rotate"
From = "0" to = "360"
Begin = "0" dur = "0.8 s"
Fill = "freeze"
Repeatcount = "INDEFINITE"
/>
</Path>
</G>
<Image xlink: href = "../images/gototop1.png" x = "0" Y = "0" width = "70px" Height = "70px"/>
<Defs>
<Lineargradient id = "loadinggradient">
<Stop class = "Stop1" offset = "0%"/>
<Stop class = "stop2" offset = "50%"/>
<Stop class = "stop3" offset = "100%"/>
</Lineargradient>
<Style type = "text/CSS">
# Loadingpath {fill: URL (# loadinggradient );}
. Stop1 {stop-color: # 118f2c; stop-opacity: 0.8 ;}
. Stop2 {stop-color: #93d701; stop-opacity: 1 ;}
. Stop3 {stop-color: # FFF ;}
</Style>
</Defs>
</SVG>
</Div>

Final effect: