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:
Michael Goulet 2022-05-05 19:34:24 -07:00 committed by GitHub
commit 292eefe753
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 0 deletions

View file

@ -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;

View file

@ -301,6 +301,7 @@ function loadCss(cssFileName) {
}
getSettingsButton().onclick = event => {
addClass(getSettingsButton(), "rotate");
event.preventDefault();
loadScript(window.settingsJS);
};

View file

@ -274,5 +274,6 @@
if (!isSettingsPage) {
switchDisplayedElement(settingsMenu);
}
removeClass(getSettingsButton(), "rotate");
}, 0);
})();