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;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes rotating {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#settings-menu.rotate img {
|
||||||
|
animation: rotating 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
#help-button {
|
#help-button {
|
||||||
font-family: "Fira Sans", Arial, sans-serif;
|
font-family: "Fira Sans", Arial, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -301,6 +301,7 @@ function loadCss(cssFileName) {
|
||||||
}
|
}
|
||||||
|
|
||||||
getSettingsButton().onclick = event => {
|
getSettingsButton().onclick = event => {
|
||||||
|
addClass(getSettingsButton(), "rotate");
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
loadScript(window.settingsJS);
|
loadScript(window.settingsJS);
|
||||||
};
|
};
|
||||||
|
|
|
@ -274,5 +274,6 @@
|
||||||
if (!isSettingsPage) {
|
if (!isSettingsPage) {
|
||||||
switchDisplayedElement(settingsMenu);
|
switchDisplayedElement(settingsMenu);
|
||||||
}
|
}
|
||||||
|
removeClass(getSettingsButton(), "rotate");
|
||||||
}, 0);
|
}, 0);
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue