add spinner loading component
This commit is contained in:
parent
19f7f6f07b
commit
cd680de68b
6
src/components/Loading/Spinner/index.tsx
Normal file
6
src/components/Loading/Spinner/index.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import './style.css'
|
||||
export default function SpinnerLoading() {
|
||||
return (
|
||||
<div className={'spinner'} style={{ display: 'inline-block'}}></div>
|
||||
)
|
||||
}
|
16
src/components/Loading/Spinner/style.css
Normal file
16
src/components/Loading/Spinner/style.css
Normal file
@ -0,0 +1,16 @@
|
||||
@keyframes spinner {
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
.spinner:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ccc;
|
||||
border-top-color: #000;
|
||||
animation: spinner .7s linear infinite;
|
||||
}
|
@ -4,10 +4,14 @@ import DefaultSeparator from "./Separator/Default";
|
||||
import Footer from './Footer/';
|
||||
import CustomInterweave from "./CustomInterweave";
|
||||
|
||||
import SpinnerLoading from "./Loading/Spinner";
|
||||
|
||||
export {
|
||||
Header,
|
||||
SeparatorWithAnchor,
|
||||
DefaultSeparator,
|
||||
Footer,
|
||||
CustomInterweave
|
||||
CustomInterweave,
|
||||
|
||||
SpinnerLoading,
|
||||
}
|
Loading…
Reference in New Issue
Block a user