Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 11x 5x 1x 1x 5x | import { type FC, type HTMLAttributes } from 'react';
import cn from 'classnames';
import ProteinIcon from '../svg/protein.svg';
import '../styles/components/loader.scss';
type Props = {
progress?: number;
};
const Loader: FC<Props & HTMLAttributes<HTMLDivElement>> = ({
progress,
className,
...props
}) => {
let p: number | undefined;
if (progress || progress === 0) {
Iif (progress < 0 || progress > 1) {
// eslint-disable-next-line no-console
console.warn(
`Loader's "progress" prop needs to be within [0, 1], it is now "${progress}"`
);
}
p = progress;
}
return (
<div className={cn('loader-container', className)} {...props}>
<ProteinIcon className="loader" width="100" height="100" />
{p && (
<span className="loader-container__progress">
<progress title={`Progress: ${Math.floor(p * 100)}%`} value={p}>
{Math.floor(p * 100)}%
</progress>
</span>
)}
</div>
);
};
export default Loader;
|