feat: simple loader
This commit is contained in:
parent
23372a130a
commit
ebd1d369a2
|
@ -0,0 +1,84 @@
|
|||
.loader-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgb(0 0 0 / 48%);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loader-block {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.7em;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.loader-title {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin-top: 0.5em;
|
||||
|
||||
.line {
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
background: #fff;
|
||||
margin: 0 6px;
|
||||
display: inline-block;
|
||||
animation: spinner-line 1000ms infinite ease-in-out;
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
.line-2 {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
.line-3 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
.line-4 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
.line-6 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
.line-7 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
.line-8 {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
.line-9 {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinner-line {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
import { useMeta } from '@oyster/common';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
export const LoaderProvider: FC = ({ children }) => {
|
||||
const { isLoading } = useMeta();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`loader-container ${isLoading ? 'active' : ''}`}>
|
||||
<div className="loader-block">
|
||||
<div className="loader-title">loading</div>
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Spinner = () => {
|
||||
return (
|
||||
<div className="spinner">
|
||||
<span className="line line-1" />
|
||||
<span className="line line-2" />
|
||||
<span className="line line-3" />
|
||||
<span className="line line-4" />
|
||||
<span className="line line-5" />
|
||||
<span className="line line-6" />
|
||||
<span className="line line-7" />
|
||||
<span className="line line-8" />
|
||||
<span className="line line-9" />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -5,29 +5,32 @@ import {
|
|||
WalletProvider,
|
||||
MetaProvider,
|
||||
} from '@oyster/common';
|
||||
import { FC } from 'react';
|
||||
import React, { FC } from 'react';
|
||||
import { ConfettiProvider } from './components/Confetti';
|
||||
import { AppLayout } from './components/Layout';
|
||||
import { LoaderProvider } from './components/Loader';
|
||||
import { CoingeckoProvider } from './contexts/coingecko';
|
||||
|
||||
export const Providers: FC = ({ children }) => {
|
||||
return (
|
||||
<ConnectionProvider>
|
||||
<WalletProvider>
|
||||
<AccountsProvider>
|
||||
<CoingeckoProvider>
|
||||
<StoreProvider
|
||||
ownerAddress={process.env.NEXT_PUBLIC_STORE_OWNER_ADDRESS}
|
||||
storeAddress={process.env.NEXT_PUBLIC_STORE_ADDRESS}
|
||||
>
|
||||
<MetaProvider>
|
||||
<AccountsProvider>
|
||||
<CoingeckoProvider>
|
||||
<StoreProvider
|
||||
ownerAddress={process.env.NEXT_PUBLIC_STORE_OWNER_ADDRESS}
|
||||
storeAddress={process.env.NEXT_PUBLIC_STORE_ADDRESS}
|
||||
>
|
||||
<MetaProvider>
|
||||
<LoaderProvider>
|
||||
<ConfettiProvider>
|
||||
<AppLayout>{children}</AppLayout>
|
||||
</ConfettiProvider>
|
||||
</MetaProvider>
|
||||
</StoreProvider>
|
||||
</CoingeckoProvider>
|
||||
</AccountsProvider>
|
||||
</LoaderProvider>
|
||||
</MetaProvider>
|
||||
</StoreProvider>
|
||||
</CoingeckoProvider>
|
||||
</AccountsProvider>
|
||||
</WalletProvider>
|
||||
</ConnectionProvider>
|
||||
);
|
||||
|
|
|
@ -23,3 +23,4 @@
|
|||
@import '../components/ArtCard/index.less';
|
||||
@import '../components/ArtistCard/index.less';
|
||||
@import '../components/Notifications/index.less';
|
||||
@import '../components/Loader/index.less';
|
||||
|
|
Loading…
Reference in New Issue