mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 03:33:09 +02:00
142 lines
2.9 KiB
SCSS
142 lines
2.9 KiB
SCSS
.nitro-loading {
|
|
position: relative;
|
|
background: $primary;
|
|
|
|
.connecting-duck {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
right: 0;
|
|
left: 0;
|
|
background: url('../../assets/images/loading/connecting-duck-spritesheet.png') no-repeat top left;
|
|
width: 235px;
|
|
height: 127px;
|
|
animation: 1.5s connecting-duck infinite step-end;
|
|
transform: scale(0.5);
|
|
|
|
&.01 {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
&.02 {
|
|
background-position: 0 -132px;
|
|
width: 280px;
|
|
height: 151px;
|
|
}
|
|
|
|
&.03 {
|
|
background-position: 0 -288px;
|
|
width: 326px;
|
|
height: 174px;
|
|
}
|
|
|
|
&.04 {
|
|
background-position: 0 -467px;
|
|
}
|
|
|
|
&.05 {
|
|
background-position: 0 -599px;
|
|
width: 280px;
|
|
height: 151px;
|
|
}
|
|
|
|
&.06 {
|
|
background-position: 0 -755px;
|
|
width: 326px;
|
|
height: 174px;
|
|
}
|
|
|
|
&.07 {
|
|
background-position: 0 -934px;
|
|
width: 190px;
|
|
height: 104px;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
right: 0;
|
|
left: 0;
|
|
width: 35%;
|
|
height: 35%;
|
|
background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
|
|
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 {
|
|
0% {
|
|
background-position: 0 0;
|
|
width: 235px;
|
|
height: 127px;
|
|
}
|
|
|
|
15% {
|
|
background-position: 0 -132px;
|
|
width: 280px;
|
|
height: 151px;
|
|
}
|
|
|
|
30% {
|
|
background-position: 0 -288px;
|
|
width: 326px;
|
|
height: 174px;
|
|
}
|
|
|
|
45% {
|
|
background-position: 0 -467px;
|
|
width: 235px;
|
|
height: 127px;
|
|
}
|
|
|
|
60% {
|
|
background-position: 0 -599px;
|
|
width: 280px;
|
|
height: 151px;
|
|
}
|
|
|
|
75% {
|
|
background-position: 0 -755px;
|
|
width: 326px;
|
|
height: 174px;
|
|
}
|
|
|
|
90% {
|
|
background-position: 0 -934px;
|
|
width: 190px;
|
|
height: 104px;
|
|
}
|
|
}
|