Index: gc_lang/fr/webext/content_scripts/panel.css ================================================================== --- gc_lang/fr/webext/content_scripts/panel.css +++ gc_lang/fr/webext/content_scripts/panel.css @@ -94,40 +94,44 @@ overflow: auto; } /* - CSS Spinner - Double bounce - http://tobiasahlin.com/spinkit/ + Spinner */ .grammalecte_spinner { visibility: hidden; - width: 40px; - height: 40px; - position: absolute; - top: 2px; - right: 180px; -} -.grammalecte_spinner .bounce1, -.grammalecte_spinner .bounce2 { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: hsl(0, 50%, 75%); - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: grammalecte-sk-bounce 2.0s infinite ease-in-out; -} -.grammalecte_spinner .bounce2 { - animation-delay: -1.0s; -} - -@keyframes grammalecte-sk-bounce { - 0%, 100% { - transform: scale(0.0); - } 50% { - transform: scale(1.0); + width: 20px; + height: 20px; + position: absolute; + top: 0px; + right: 200px; + background-color: hsla(210, 80%, 80%, .5); + border: 10px solid hsla(210, 80%, 60%, .5); + border-top: 10px solid hsla(210, 100%, 40%, .7); + border-bottom: 10px solid hsla(210, 100%, 40%, .7); + border-radius: 50%; + text-align: center; + cursor: pointer; + box-shadow: 0 0 0 0 hsla(210, 50%, 50%, .5); + animation: grammalecte-spin-big .5s linear infinite; +} + +@keyframes grammalecte-spin-big { + 0% { + transform: rotate(0deg) scale(1); + border-top: 10px solid hsla(210, 100%, 40%, .7); + border-bottom: 10px solid hsla(210, 100%, 40%, .7); + } + 70% { + transform: rotate(180deg) scale(.8); + border-top: 10px solid hsla(0, 100%, 40%, .7); + border-bottom: 10px solid hsla(0, 100%, 40%, .7); + box-shadow: 0 0 0 20px hsla(210, 50%, 50%, 0); + } + 100% { + transform: rotate(360deg) scale(1); + border-top: 10px solid hsla(210, 100%, 40%, .7); + border-bottom: 10px solid hsla(210, 100%, 40%, .7); + box-shadow: 0 0 0 0 hsla(210, 50%, 50%, 0); } } Index: gc_lang/fr/webext/content_scripts/panel.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel.js +++ gc_lang/fr/webext/content_scripts/panel.js @@ -56,12 +56,12 @@ return xButtonLine; } _createWaitIcon () { let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"}); - xWaitIcon.appendChild(oGrammalecte.createNode("div", {className: "bounce1"})); - xWaitIcon.appendChild(oGrammalecte.createNode("div", {className: "bounce2"})); + //xWaitIcon.appendChild(oGrammalecte.createNode("div", {className: "bounce1"})); + //xWaitIcon.appendChild(oGrammalecte.createNode("div", {className: "bounce2"})); return xWaitIcon; } _createCopyButton () { let xButton = oGrammalecte.createNode("div", {id: "grammalecte_clipboard_button", className: "grammalecte_copy_button", textContent: "∑", title: "Copier dans le presse-papiers"});