From 206342be5bb9aa9d73cf07529795a28d2606c944 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 26 May 2018 16:36:43 +1200 Subject: Update loading spinner --- web/app.css | 38 ++++++++++++-------------------------- 1 file changed, 12 insertions(+), 26 deletions(-) (limited to 'web') diff --git a/web/app.css b/web/app.css index 97f3981..b15dec3 100644 --- a/web/app.css +++ b/web/app.css @@ -31,38 +31,24 @@ body.x-border-layout-ct, div.x-border-layout-ct { font-size: x-small; } -#spinner { +#spinner:before { + content: ''; + box-sizing: border-box; position: absolute; top: 50%; left: 50%; - height: 60px; width: 60px; + height: 60px; margin-top: -30px; margin-left: -30px; - -webkit-animation: rotation .8s infinite linear; - -moz-animation: rotation .8s infinite linear; - -o-animation: rotation .8s infinite linear; - animation: rotation .8s infinite linear; - border-left: 6px solid rgba(56, 146, 212, .15); - border-right: 6px solid rgba(56, 146, 212, .15); - border-bottom: 6px solid rgba(56, 146, 212, .15); - border-top: 6px solid rgba(56, 146, 212, .8); - border-radius: 100%; + border-radius: 50%; + border-top: 6px solid #5fa2dd; + border-right: 6px solid transparent; + animation: spinner .6s linear infinite; } -@-webkit-keyframes rotation { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(359deg); } -} -@-moz-keyframes rotation { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(359deg); } -} -@-o-keyframes rotation { - from { -o-transform: rotate(0deg); } - to { -o-transform: rotate(359deg); } -} -@keyframes rotation { - from { transform: rotate(0deg); } - to { transform: rotate(359deg); } +@keyframes spinner { + to { + transform: rotate(360deg); + } } -- cgit v1.2.3