lbry-desktop/src/ui/scss/component/_spinner.scss
2019-07-02 00:04:28 -04:00

66 lines
892 B
SCSS

.spinner {
width: 50px;
height: 40px;
font-size: 10px;
margin: var(--spacing-small);
text-align: center;
.rect {
width: 6px;
height: 100%;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
display: inline-block;
margin: 0 2px;
&.rect2 {
animation-delay: -1.1s;
}
&.rect3 {
animation-delay: -1s;
}
&.rect4 {
animation-delay: -0.9s;
}
&.rect5 {
animation-delay: -0.8s;
}
}
}
.spinner--dark {
.rect {
background-color: $lbry-black;
}
}
.spinner--light {
.rect {
background-color: $lbry-white;
[data-mode='dark'] & {
background-color: var(--dm-color-01);
}
}
}
.spinner--small {
height: 10px;
display: inline-block;
.rect {
width: 3px;
}
}
.spinner--splash {
margin-top: var(--spacing-large);
.rect {
background-color: $lbry-white;
}
}