mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-01-19 02:30:02 -05:00
35 lines
825 B
SCSS
35 lines
825 B
SCSS
.studio-status-icon-spinner {
|
|
/* This class can be used on an icon that should spin.
|
|
It first plays the intro animation, then spins forever. */
|
|
animation-name: intro, spin;
|
|
animation-duration: .25s, 1s;
|
|
animation-timing-function: cubic-bezier(.3, -3, .6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
|
|
animation-delay: 0s, .25s;
|
|
animation-iteration-count: 1, infinite;
|
|
animation-direction: normal;
|
|
width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */
|
|
height: 1.4rem;
|
|
transform-origin: center;
|
|
}
|
|
|
|
@keyframes intro {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|