aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-05-26 16:36:43 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-05-26 16:36:43 +1200
commit206342be5bb9aa9d73cf07529795a28d2606c944 (patch)
tree3cb56c2c35ac0f87de5ee3cf2e8e8b15af13f13b
parentdefba3eba05879803e1ec5d812e08dd0eb207e46 (diff)
downloadtrackermap-web-206342be5bb9aa9d73cf07529795a28d2606c944.tar.gz
trackermap-web-206342be5bb9aa9d73cf07529795a28d2606c944.tar.bz2
trackermap-web-206342be5bb9aa9d73cf07529795a28d2606c944.zip
Update loading spinner
-rw-r--r--web/app.css38
1 files changed, 12 insertions, 26 deletions
diff --git a/web/app.css b/web/app.css
index 97f3981f..b15dec34 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);
+ }
}