Rollup merge of #96704 - GuillaumeGomez:rotation-animation, r=jsha
Add rotation animation on settings button when loading As discussed, I added an animation when the settings JS file is loading (I voluntarily made the timeout at the end of the `settings.js` super long so we can see what the animation looks like): https://user-images.githubusercontent.com/3050060/166693243-816a08b7-5e39-4142-acd3-686ad9950d8e.mp4 r? ````@jsha````
This commit is contained in:
commit
292eefe753
3 changed files with 14 additions and 0 deletions
|
@ -1401,6 +1401,18 @@ pre.rust {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#settings-menu.rotate img {
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
#help-button {
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
text-align: center;
|
||||
|
|
|
@ -301,6 +301,7 @@ function loadCss(cssFileName) {
|
|||
}
|
||||
|
||||
getSettingsButton().onclick = event => {
|
||||
addClass(getSettingsButton(), "rotate");
|
||||
event.preventDefault();
|
||||
loadScript(window.settingsJS);
|
||||
};
|
||||
|
|
|
@ -274,5 +274,6 @@
|
|||
if (!isSettingsPage) {
|
||||
switchDisplayedElement(settingsMenu);
|
||||
}
|
||||
removeClass(getSettingsButton(), "rotate");
|
||||
}, 0);
|
||||
})();
|
||||
|
|
Loading…
Add table
Reference in a new issue