From 13b45aa6c66c8075acc95ea94d8c5cbc24a3a203 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 4 May 2022 15:39:18 +0200 Subject: [PATCH] Add rotation animation on settings button when loading --- src/librustdoc/html/static/css/rustdoc.css | 12 ++++++++++++ src/librustdoc/html/static/js/main.js | 2 +- src/librustdoc/html/static/js/settings.js | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 81c12be8e83c0..12059e0b9c4b5 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -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; diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 1dfd9c762c46e..1f41d62bde346 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -300,8 +300,8 @@ function loadCss(cssFileName) { document.head.append(script); } - getSettingsButton().onclick = event => { + addClass(getSettingsButton(), "rotate"); event.preventDefault(); loadScript(window.settingsJS); }; diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index 43b24245ab2e8..04c64cbb54846 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -272,5 +272,6 @@ if (!isSettingsPage) { switchDisplayedElement(settingsMenu); } + removeClass(getSettingsButton(), "rotate"); }, 0); })();