muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

#38 added image preloaders

Browse source
This commit is contained in:
Fedor Katurov 2021-06-21 16:38:11 +07:00
parent d0989ac58b
commit 92b273f377
10 changed files with 192 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/input/LoaderCircle/index.tsx
View file

@ -2,16 +2,15 @@ import React, { FC } from 'react';
import styles from './styles.module.scss';
import { describeArc } from '~/utils/dom';
import classNames from 'classnames';
import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
interface IProps {
size?: number;
className?: string;
}
export const LoaderCircle: FC<IProps> = ({ size = 24 }) => (
<div className={classNames(styles.wrap, 'loader-circle')}>
<svg className={styles.icon} width={size} height={size}>
<path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
<path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />
</svg>
export const LoaderCircle: FC<IProps> = ({ size = 24, className }) => (
<div className={classNames(styles.wrap, 'loader-circle', className)}>
<LoaderCircleInner size={size} />
</div>
);

5
src/components/input/LoaderCircle/styles.module.scss
View file

@ -1,10 +1,5 @@
@import "src/styles/variables";
.icon {
fill: transparentize(black, 0.6);
stroke: none;
}
@keyframes spin {
0% {
transform: rotate(0);

18
src/components/input/LoaderCircleInner/index.tsx Normal file
View file

@ -0,0 +1,18 @@
import React, { FC, HTMLAttributes, SVGAttributes } from 'react';
import { describeArc } from '~/utils/dom';
import styles from './styles.module.scss';
import classNames from 'classnames';
interface IProps extends SVGAttributes<SVGElement> {
size: number;
className?: string;
}
const LoaderCircleInner: FC<IProps> = ({ size, className, ...props }) => (
<svg className={classNames(styles.icon, className)} width={size} height={size} {...props}>
<path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
<path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />
</svg>
);
export { LoaderCircleInner };

5
src/components/input/LoaderCircleInner/styles.module.scss Normal file
View file

@ -0,0 +1,5 @@
.icon {
fill: transparentize(black, 0.6);
stroke: none;
}