diff --git a/starters/chrome/extension/popup/style.css b/starters/chrome/extension/popup/style.css index 0c4184806..c5dfda5f4 100644 --- a/starters/chrome/extension/popup/style.css +++ b/starters/chrome/extension/popup/style.css @@ -11,14 +11,28 @@ body, button, input, select, textarea { a { color: #999 ; text-decoration: none } a:focus, a:hover { text-decoration: underline ; color: inherit } -/* Loading elems */ -.loading-bg { background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111; } +/* Loader */ +.loading-bg { + background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111 ; + display: inline-grid ; align-content: center ; justify-content: center /* center spinner */ +} .loading-spinner { - border: 8px solid #f3f3f3 ; border-top: 8px solid #3498db ; border-radius: 50% ; - width: 15vh ; height: 15vh ; animation: spin 1s linear infinite ; - position: absolute ; top: calc(50% - 7.5vh - 8px) ; left: calc(50% - 7.5vh) + width: 11px ; aspect-ratio: 1 ; border-radius: 50% ; border: 5px solid #000 ; + animation: loader-move-head-tail 0.8s infinite linear alternate, loader-rotate 1.6s infinite linear +} +@keyframes loader-move-head-tail { + 0% { clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0) } + 12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0) } + 25% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) } + 50% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%) } + 62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%) } + 75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%) } + 100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%) } } -@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }} +@keyframes loader-rotate { + 0% { transform: scaleY(1) rotate(0deg) } 49.99% { transform: scaleY(1) rotate(135deg) } + 50% { transform: scaleY(-1) rotate(0deg) } 100% { transform: scaleY(-1) rotate(-135deg) } +} /* Header */ .menu-header {