49 lines
960 B
CSS
49 lines
960 B
CSS
@keyframes bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
40%, 43% {
|
|
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transform: translate3d(0, -10px, 0);
|
|
}
|
|
|
|
70% {
|
|
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transform: translate3d(0, -6px, 0);
|
|
}
|
|
|
|
90% {
|
|
transform: translate3d(0, -2px, 0);
|
|
}
|
|
}
|
|
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.icon-dots {
|
|
display: block;
|
|
height: 6px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.icon-dots > .dot {
|
|
fill: currentColor;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.icon-dots > .dot:nth-of-type(2) {
|
|
animation-duration: 1.25s;
|
|
animation-fill-mode: both;
|
|
animation-iteration-count: infinite;
|
|
animation-name: bounce;
|
|
animation-play-state: paused;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
:host(.update-downloaded) .icon-dots > .dot:nth-of-type(2) {
|
|
animation-play-state: running;
|
|
}
|