feat: Loading Common

This commit is contained in:
sonnguyenkieio
2021-09-14 14:39:01 +07:00
parent 214c9b8680
commit 2656c56a6f
2 changed files with 19 additions and 33 deletions

View File

@@ -1,31 +1,20 @@
@import '../../../styles/utilities'; @import '../../../styles/utilities';
.loadingCommon:empty { .wrapper {
@apply text-center;
.loadingCommon {
@apply bg-white; @apply bg-white;
height: 7rem; height: 7rem;
width: 7rem; width: 7rem;
border-radius: 50%; border-radius: 50%;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
margin: auto; margin: auto;
background: url('./assets/carrot.png') top 50% left 50% no-repeat; background: url('./assets/carrot.png') top 50% left 50% no-repeat;
}
}
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
&.small {
height: 5rem;
width: 5rem;
}
&.default {
}
&.large {
height: 10rem;
width: 10rem;
}
}

View File

@@ -1,18 +1,15 @@
import React from "react"; import React from "react";
import s from './LoadingCommon.module.scss' import s from './LoadingCommon.module.scss'
interface LoadingCommonProps { const LoadingCommon = () => {
children? : React.ReactNode;
}
const LoadingCommon = ({ children }: LoadingCommonProps) => {
return ( return (
<> <div className={s.wrapper}>
<div className={s.loadingCommon}> <div className={s.loadingCommon}>
{children}
</div>
<p>Loading...</p>
</div> </div>
</>
) )
} }