mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
✨ feat: Loading Common
This commit is contained in:
parent
214c9b8680
commit
2656c56a6f
@ -1,31 +1,20 @@
|
||||
@import '../../../styles/utilities';
|
||||
|
||||
.loadingCommon:empty {
|
||||
@apply bg-white;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
border-radius: 50%;
|
||||
animation: spin 2s linear infinite;
|
||||
margin: auto;
|
||||
.wrapper {
|
||||
@apply text-center;
|
||||
|
||||
background: url('./assets/carrot.png') top 50% left 50% no-repeat;
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
&.default {
|
||||
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
.loadingCommon {
|
||||
@apply bg-white;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
border-radius: 50%;
|
||||
animation: spin 2s linear infinite;
|
||||
margin: auto;
|
||||
background: url('./assets/carrot.png') top 50% left 50% no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
@ -1,18 +1,15 @@
|
||||
import React from "react";
|
||||
import s from './LoadingCommon.module.scss'
|
||||
|
||||
interface LoadingCommonProps {
|
||||
children? : React.ReactNode;
|
||||
}
|
||||
|
||||
const LoadingCommon = ({ children }: LoadingCommonProps) => {
|
||||
const LoadingCommon = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={s.wrapper}>
|
||||
<div className={s.loadingCommon}>
|
||||
{children}
|
||||
|
||||
</div>
|
||||
</>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user