kopia lustrzana https://github.com/Stopka/fedisearch
27 wiersze
1.4 KiB
TypeScript
27 wiersze
1.4 KiB
TypeScript
import React, { ReactNode } from 'react'
|
|
|
|
const Loader:React.FC<{ children: ReactNode, loading: boolean }> = ({ children, loading }) => {
|
|
return (
|
|
<div className={'loader' + (loading ? ' -loading' : '')}>
|
|
<div className={'loader-content'}>
|
|
{children}
|
|
</div>
|
|
<div className={'loader-visualisation'}>
|
|
{loading
|
|
? (
|
|
<>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className='loader-graphics' width="34" height="34">
|
|
<path className="rail" d="m 16.977523,0.24095147 c -9.2629169,0 -16.73280045,7.51449143 -16.73280045,16.77740253 0,9.262912 7.46988355,16.777403 16.73280045,16.777403 9.262917,0 16.777413,-7.514491 16.777413,-16.777403 0,-9.2629111 -7.514496,-16.77740253 -16.777413,-16.77740253 z m 0,4.14972823 c 6.966927,0 12.627682,5.6607523 12.627682,12.6276743 0,6.966923 -5.660755,12.583053 -12.627682,12.583053 -6.966937,0 -12.5830596,-5.61613 -12.5830596,-12.583053 0,-6.966922 5.6161226,-12.6276743 12.5830596,-12.6276743 z" />
|
|
<path className="train" d="M 31.677259,17.003529 A 14.680208,14.680199 0 0 1 20.796571,31.183505" />
|
|
</svg>
|
|
<span>Loading...</span>
|
|
</>
|
|
)
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Loader
|