aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2015-11-16 14:04:27 +1300
committerAnton Tananaev <anton.tananaev@gmail.com>2015-11-16 14:04:27 +1300
commite4f936e9732f5ad2e99553425d8c5c9222e486f2 (patch)
tree07cb1ed032ae35b14b55a9859c749fedfdd7e2e4
parent28d60da9a2f80fa8fc3dd28ec5bdd7847a36727c (diff)
downloadtraccar-server-e4f936e9732f5ad2e99553425d8c5c9222e486f2.tar.gz
traccar-server-e4f936e9732f5ad2e99553425d8c5c9222e486f2.tar.bz2
traccar-server-e4f936e9732f5ad2e99553425d8c5c9222e486f2.zip
Add loading spinner to the webpage
-rw-r--r--web/app.css38
-rw-r--r--web/app/controller/Root.js1
-rw-r--r--web/debug.html7
-rw-r--r--web/release.html7
4 files changed, 46 insertions, 7 deletions
diff --git a/web/app.css b/web/app.css
index 897fd0cbc..3c4507e38 100644
--- a/web/app.css
+++ b/web/app.css
@@ -12,8 +12,44 @@
}
#attribution {
- position: fixed;
+ position: absolute;
bottom: 10px;
right: 15px;
font-size: x-small;
}
+
+#spinner {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ height: 60px;
+ width: 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%;
+}
+
+@-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); }
+}
diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js
index b260cb8a1..041e0b902 100644
--- a/web/app/controller/Root.js
+++ b/web/app/controller/Root.js
@@ -40,6 +40,7 @@ Ext.define('Traccar.controller.Root', {
onServerReturn: function (options, success, response) {
var result;
+ Ext.get('spinner').remove();
if (Traccar.ErrorManager.check(success, response)) {
result = Ext.decode(response.responseText);
if (result.success) {
diff --git a/web/debug.html b/web/debug.html
index de63d32a2..c4340af97 100644
--- a/web/debug.html
+++ b/web/debug.html
@@ -8,14 +8,15 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.11.1/ol.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="app.css">
+</head>
+<body>
+<div id="spinner"></div>
+<div id="attribution">Powered by <a href="https://www.traccar.org/">Traccar GPS Tracking System</a></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all-debug.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/theme-neptune.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.11.1/ol-debug.js"></script>
<script src="arrowstyle.js"></script>
<script src="locale.js"></script>
<script src="app.js"></script>
-</head>
-<body>
-<div id="attribution">Powered by <a href="https://www.traccar.org/">Traccar GPS Tracking System</a></div>
</body>
</html>
diff --git a/web/release.html b/web/release.html
index 27200b142..100849130 100644
--- a/web/release.html
+++ b/web/release.html
@@ -8,6 +8,10 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.11.1/ol.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="app.css">
+</head>
+<body>
+<div id="spinner"></div>
+<div id="attribution">Powered by <a href="https://www.traccar.org/">Traccar GPS Tracking System</a></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/theme-neptune.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.11.1/ol-debug.min.js"></script>
@@ -16,8 +20,5 @@
<script type="text/javascript">
Ext.Loader.loadScript('app.min.js');
</script>
-</head>
-<body>
-<div id="attribution">Powered by <a href="https://www.traccar.org/">Traccar GPS Tracking System</a></div>
</body>
</html>