react-loading-progress
Version:
Loading display components
267 lines (266 loc) • 5.63 kB
JavaScript
import React from "react";
export default (function () {
return React.createElement(
"svg",
{
className: "lds-spinner",
width: "200px",
height: "200px",
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
style: { background: "none" }
},
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(0 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.9166666666666666s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(30 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.8333333333333334s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(60 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.75s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(90 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.6666666666666666s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(120 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.5833333333333334s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(150 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.5s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(180 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.4166666666666667s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(210 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.3333333333333333s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(240 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.25s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(270 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.16666666666666666s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(300 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "-0.08333333333333333s",
repeatCount: "indefinite"
})
),
React.createElement(
"rect",
{
x: 47,
y: 24,
rx: "9.4",
ry: "4.8",
width: 6,
height: 12,
fill: "#000",
transform: "rotate(330 50 50)"
},
React.createElement("animate", {
attributeName: "opacity",
values: "1;0",
times: "0;1",
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
})
)
);
});