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

NodeLayout

Browse source
This commit is contained in:
muerwre 2019-08-25 16:10:46 +07:00
parent 684a4f4474
commit b154277de8
23 changed files with 332 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,7 @@
import React, { FC } from 'react';
import * as styles from './styles.scss';
import { Icon } from '../Icon';
import { describeArc } from '~/utils/dom';
interface IProps {
size?: number;
@ -7,31 +9,9 @@ interface IProps {
export const LoaderCircle: FC<IProps> = ({ size = 24 }) => (
<div className={styles.wrap}>
<svg width={size} height={size} viewBox="0 0 24 24">
<g strokeWidth={0.5}>
{
[...new Array(8)].map((el, i) => (
<path
d="M11,2 L11,6 C11,6.55228475 11.4477153,7 12,7 C12.5522847,7 13,6.55228475 13,6 L13,2 C13,1.44771525 12.5522847,1 12,1 C11.4477153,1 11,1.44771525 11,2 Z"
opacity={0.125 * (8 - i)}
transform={`rotate(${Math.floor(45 * i)} 12 12)`}
// style={{
// animationDelay: `${-100 * (8 - i)}ms`,
// }}
key={i}
/>
))
}
</g>
<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>
</div>
);
/*
<div className={styles.wrap}>
<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>
</div>
*/

20
src/components/input/LoaderCircle/styles.scss
View file

@ -4,16 +4,26 @@
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fade {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0.1; transform: scale(4); }
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.1;
transform: scale(4);
}
}
.wrap {
animation: spin infinite steps(9, end) 1s;
animation: spin infinite 1s linear;
display: inline-flex;
}