nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-18 18:02:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update loading

Browse Source
This commit is contained in:
Bill 2022-03-23 22:56:18 -04:00
parent 9fe4b3d9ba
commit 2f43ffc36a
2 changed files with 3 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/loading/LoadingView.scss
View File

@ -1,6 +1,7 @@
.nitro-loading { .nitro-loading {
position: relative; position: relative;
background: $primary; background: $primary;
z-index: 100;
.connecting-duck { .connecting-duck {
position: absolute; position: absolute;
@ -60,34 +61,6 @@
background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center; background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center;
z-index: 1; z-index: 1;
} }
.nitro-loading-bar {
border:1px solid white;
padding:3px;
height:30px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
&::before {
content:'';
position: absolute;
inset: 0;
margin:3px;
border-radius: 4px;
background:darken($primary,15);
z-index: 0;
}
.nitro-loading-bar-inner {
height:100%;
z-index: 4;
border-radius: 4px;
transition: all 1s;
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
}
}
} }
@keyframes connecting-duck { @keyframes connecting-duck {

6
src/components/loading/LoadingView.tsx
View File

@ -1,6 +1,6 @@
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import { NotificationUtilities } from '../../api'; import { NotificationUtilities } from '../../api';
import { Base, Column, Text } from '../../common'; import { Base, Column, LayoutProgressBar, Text } from '../../common';
interface LoadingViewProps interface LoadingViewProps
{ {
@ -31,9 +31,7 @@ export const LoadingView: FC<LoadingViewProps> = props =>
: :
<> <>
<Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text> <Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text>
<div className="nitro-loading-bar mt-2"> <LayoutProgressBar progress={ percent } className="mt-2 large" />
<div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
</div>
</> </>
} }