mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 19:33:04 +02:00
71 lines
1.4 KiB
SCSS
71 lines
1.4 KiB
SCSS
.nitro-loading {
|
|
position: relative;
|
|
background: $primary;
|
|
z-index: 100;
|
|
|
|
.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);
|
|
}
|
|
|
|
.nitro-logo {
|
|
width: 47px;
|
|
height: 65px;
|
|
background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|