mars-v2-frontend/src/components/CircularProgress.tsx
Linkie Link 74127213aa
Mp 3413 pending tx toasts (#478)
* MP-3413: added pending transaction toast

* fix: removed txLoader/broadcastInitialized

* fix: replace the toast instead of closing the previous

* fix: fixed the build

* MP-3413: added transition on update and success checkmark

* fix: changed Search for ChevronDown
2023-09-18 16:54:36 +02:00

72 lines
1.9 KiB
TypeScript

import classNames from 'classnames'
import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
import { REDUCE_MOTION_KEY } from 'constants/localStore'
import useLocalStorage from 'hooks/useLocalStorage'
interface Props {
color?: string
size?: number
className?: string
}
export const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Props) => {
const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
const borderWidth = `${size / 10}px`
const borderColor = `${color} transparent transparent transparent`
const loaderClasses = classNames('inline-block relative', className)
const elementClasses =
'block absolute w-4/5 h-4/5 m-[10%] rounded-full animate-progress border-solid'
if (reduceMotion)
return (
<div
className={classNames('flex items-center', loaderClasses)}
style={{ width: `${size}px`, height: `${size}px` }}
>
<p
className='w-full text-center'
style={{ fontSize: `${size}px`, lineHeight: `${size}px`, color: `${color}` }}
>
...
</p>
</div>
)
return (
<div className={loaderClasses} style={{ width: `${size}px`, height: `${size}px` }}>
<div
className={elementClasses}
style={{
borderWidth: borderWidth,
borderColor: borderColor,
}}
/>
<div
className={elementClasses}
style={{
animationDelay: '-0.45s',
borderWidth: borderWidth,
borderColor: borderColor,
}}
/>
<div
className={elementClasses}
style={{
animationDelay: '-0.3s',
borderWidth: borderWidth,
borderColor: borderColor,
}}
/>
<div
className={elementClasses}
style={{
animationDelay: '-0.15s',
borderWidth: borderWidth,
borderColor: borderColor,
}}
/>
</div>
)
}