rypi-dev/rypi-scrapper
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

feat(components/design): implement Loader

Browse Source
This commit is contained in:
Walid 2023-04-28 14:34:46 +01:00
parent 2b2a5483e5
commit 1206af1e1d
Signed by: Walidoux
GPG Key ID: CCF21881FE8BEBAF
2 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/design/Loader/Loader.tsx Normal file
View File

@ -0,0 +1,67 @@
import type { HTMLMotionProps } from 'framer-motion'
import { AnimateView } from '../../system'
interface LoaderProps extends HTMLMotionProps<'main'> {
active: boolean
}
export const Loader: React.FC<LoaderProps> = ({ active, ...rest }) => {
return (
<AnimateView
condition={active}
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0 }}
{...rest}>
<svg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='#fff'>
<g fill='none' fillRule='evenodd' strokeWidth={2}>
<circle cx='22' cy='22' r='1'>
<animate
attributeName='r'
begin='0s'
dur='1.8s'
values='1; 20'
calcMode='spline'
keyTimes='0; 1'
keySplines='0.165, 0.84, 0.44, 1'
repeatCount='indefinite'
/>
<animate
attributeName='stroke-opacity'
begin='0s'
dur='1.8s'
values='1; 0'
calcMode='spline'
keyTimes='0; 1'
keySplines='0.3, 0.61, 0.355, 1'
repeatCount='indefinite'
/>
</circle>
<circle cx='22' cy='22' r='1'>
<animate
attributeName='r'
begin='-0.9s'
dur='1.8s'
values='1; 20'
calcMode='spline'
keyTimes='0; 1'
keySplines='0.165, 0.84, 0.44, 1'
repeatCount='indefinite'
/>
<animate
attributeName='stroke-opacity'
begin='-0.9s'
dur='1.8s'
values='1; 0'
calcMode='spline'
keyTimes='0; 1'
keySplines='0.3, 0.61, 0.355, 1'
repeatCount='indefinite'
/>
</circle>
</g>
</svg>
</AnimateView>
)
}

1
src/components/design/Loader/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './Loader'