IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components:Loader: Add new track loader

Browse Source
This commit is contained in:
Akmal Isomadinov 2022-11-04 19:27:58 +05:00
parent c81351fed2
commit bd0ef5d204
3 changed files with 134 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/components/loader/index.js
View File

@ -4,10 +4,22 @@ import PropTypes from "prop-types";
import { Oval } from "./types/oval";
import { DualRing } from "./types/dual-ring";
import { Rombs } from "./types/rombs";
import { Track } from "./types/track";
import Text from "../text";
const Loader = (props) => {
const { type, color, size, label, className, style, id, theme } = props;
const {
type,
color,
size,
label,
className,
style,
id,
primary,
theme,
} = props;
const svgRenderer = (type) => {
switch (type) {
@ -17,6 +29,8 @@ const Loader = (props) => {
return <DualRing {...props} />;
case "rombs":
return <Rombs {...props} />;
case "track":
return <Track />;
default:
return (
<span style={{ ...style }}>
@ -39,7 +53,7 @@ Loader.propTypes = {
/** Font color */
color: PropTypes.string,
/** Type loader */
type: PropTypes.oneOf(["base", "oval", "dual-ring", "rombs"]),
type: PropTypes.oneOf(["base", "oval", "dual-ring", "rombs", "track"]),
/** Font size */
size: PropTypes.string,
/** Text label */

3
packages/components/loader/loader.stories.js
View File

@ -38,7 +38,7 @@ const ExamplesTemplate = (args) => {
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr 1fr",
gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
height: "100px",
}}
>
@ -61,6 +61,7 @@ const ExamplesTemplate = (args) => {
label={"Loading content, please wait."}
/>
<Loader type={"rombs"} size={"40px"} />
<Loader type="track" style={{ width: "30px" }} />
</div>
);
};

116
packages/components/loader/types/track.js Normal file
View File

@ -0,0 +1,116 @@
import React from "react";
const Track = () => {
return (
<svg className="loader_track" viewBox="-10 -10 220 220">
<defs>
<linearGradient
id="spinner-color-1"
gradientUnits="objectBoundingBox"
x1="0"
y1="0"
x2="1"
y2="1"
>
<stop offset="0%" stopColor="currentColor" stopOpacity="0" />
<stop offset="100%" stopColor="currentColor" stopOpacity=".2" />
</linearGradient>
<linearGradient
id="spinner-color-2"
gradientUnits="objectBoundingBox"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stopColor="currentColor" stopOpacity=".2" />
<stop offset="100%" stopColor="currentColor" stopOpacity=".4" />
</linearGradient>
<linearGradient
id="spinner-color-3"
gradientUnits="objectBoundingBox"
x1="1"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stopColor="currentColor" stopOpacity=".4" />
<stop offset="100%" stopColor="currentColor" stopOpacity=".6" />
</linearGradient>
<linearGradient
id="spinner-color-4"
gradientUnits="objectBoundingBox"
x1="1"
y1="1"
x2="0"
y2="0"
>
<stop offset="0%" stopColor="currentColor" stopOpacity=".6" />
<stop offset="100%" stopColor="currentColor" stopOpacity=".8" />
</linearGradient>
<linearGradient
id="spinner-color-5"
gradientUnits="objectBoundingBox"
x1="0"
y1="1"
x2="0"
y2="0"
>
<stop offset="0%" stopColor="currentColor" stopOpacity=".8" />
<stop offset="100%" stopColor="currentColor" stopOpacity="1" />
</linearGradient>
<linearGradient
id="spinner-color-6"
gradientUnits="objectBoundingBox"
x1="0"
y1="1"
x2="1"
y2="0"
>
<stop offset="0%" stopColor="currentColor" stopOpacity="1" />
<stop offset="100%" stopColor="currentColor" stopOpacity="1" />
</linearGradient>
</defs>
<g
fill="none"
strokeWidth="60"
transform="translate(100,100) scale(0.85)"
>
<path
d="M 0,-100 A 100,100 0 0,1 86.6,-50"
stroke="url(#spinner-color-1)"
/>
<path
d="M 86.6,-50 A 100,100 0 0,1 86.6,50"
stroke="url(#spinner-color-2)"
/>
<path
d="M 86.6,50 A 100,100 0 0,1 0,100"
stroke="url(#spinner-color-3)"
/>
<path
d="M 0,100 A 100,100 0 0,1 -86.6,50"
stroke="url(#spinner-color-4)"
/>
<path
d="M -86.6,50 A 100,100 0 0,1 -86.6,-50"
stroke="url(#spinner-color-5)"
/>
<path
d="M -86.6,-50 A 100,100 0 0,1 0,-100"
stroke="url(#spinner-color-6)"
/>
</g>
<animateTransform
from="0 0 0"
to="360 0 0"
attributeName="transform"
type="rotate"
repeatCount="indefinite"
dur="1300ms"
/>
</svg>
);
};
export { Track };