lbry-desktop/ui/scss/component/_spinner.scss

63 lines
846 B
SCSS
Raw Normal View History

2017-12-01 04:51:55 +01:00
.spinner {
2018-03-26 23:32:43 +02:00
width: 50px;
height: 40px;
2018-10-17 19:14:24 +02:00
2018-03-26 23:32:43 +02:00
font-size: 10px;
2019-06-11 20:10:58 +02:00
margin: var(--spacing-small);
2018-10-17 19:14:24 +02:00
text-align: center;
2018-03-26 23:32:43 +02:00
.rect {
width: 6px;
2018-10-17 19:14:24 +02:00
height: 100%;
2018-03-26 23:32:43 +02:00
animation: sk-stretchdelay 1.2s infinite ease-in-out;
2018-10-17 19:14:24 +02:00
display: inline-block;
margin: 0 2px;
2018-03-26 23:32:43 +02:00
&.rect2 {
animation-delay: -1.1s;
2017-12-01 04:51:55 +01:00
}
2018-03-26 23:32:43 +02:00
&.rect3 {
animation-delay: -1s;
2017-12-01 04:51:55 +01:00
}
2018-03-26 23:32:43 +02:00
&.rect4 {
animation-delay: -0.9s;
}
2017-12-01 04:51:55 +01:00
2018-03-26 23:32:43 +02:00
&.rect5 {
animation-delay: -0.8s;
}
2017-12-01 04:51:55 +01:00
}
2018-03-26 23:32:43 +02:00
}
2017-12-01 04:51:55 +01:00
2018-03-26 23:32:43 +02:00
.spinner--dark {
.rect {
2019-11-22 22:13:00 +01:00
background-color: var(--color-spinner-dark);
2017-12-01 04:51:55 +01:00
}
}
.spinner--light {
2018-08-13 18:23:01 +02:00
.rect {
2019-11-22 22:13:00 +01:00
background-color: var(--color-spinner-light);
2018-08-13 18:23:01 +02:00
}
}
2018-08-28 17:35:24 +02:00
.spinner--small {
2019-06-11 20:10:58 +02:00
height: 10px;
2019-06-17 22:32:38 +02:00
display: inline-block;
2018-08-28 17:35:24 +02:00
.rect {
width: 3px;
}
}
.spinner--splash {
2019-06-11 20:10:58 +02:00
margin-top: var(--spacing-large);
.rect {
2019-11-22 22:13:00 +01:00
background-color: black; //white;
2017-12-01 04:51:55 +01:00
}
}