2021-04-14 20:24:24 +02:00
|
|
|
.nitro-loading {
|
2021-09-30 09:46:58 +02:00
|
|
|
position: relative;
|
2022-03-15 10:11:11 +01:00
|
|
|
background: $primary;
|
2021-09-30 09:46:58 +02:00
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|
2021-04-14 20:24:24 +02:00
|
|
|
|
2022-03-15 10:59:51 +01:00
|
|
|
.nitro-logo {
|
|
|
|
width: 47px;
|
|
|
|
height: 65px;
|
|
|
|
background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center;
|
|
|
|
z-index: 1;
|
2021-04-14 20:24:24 +02:00
|
|
|
}
|
2022-03-15 10:11:11 +01:00
|
|
|
|
|
|
|
.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%);
|
|
|
|
}
|
|
|
|
}
|
2021-09-30 09:46:58 +02:00
|
|
|
}
|
2021-04-14 20:24:24 +02:00
|
|
|
|
2021-09-30 09:46:58 +02:00
|
|
|
@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;
|
2021-04-14 20:24:24 +02:00
|
|
|
}
|
|
|
|
}
|