Mirror of https://github.com/roostorg/coop
github.com/roostorg/coop
1/**
2 * Single component loading indicator (centered using component height & width)
3 */
4export default function ComponentLoading(props: {
5 size?: 'small' | 'default' | 'large';
6}) {
7 const { size = 'default' } = props;
8 const sizeStyle = (() => {
9 switch (size) {
10 case 'small':
11 return 'size-4';
12 case 'default':
13 return 'size-6';
14 case 'large':
15 return 'size-8';
16 }
17 })();
18 return (
19 <div className="flex flex-col items-center justify-center w-full my-6">
20 <div
21 className={`animate-spin inline-block border-solid border-2 border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500 ${sizeStyle}`}
22 role="status"
23 aria-label="loading"
24 >
25 <span className="sr-only">Loading...</span>
26 </div>
27 </div>
28 );
29}