diff options
| author | Anton Tananaev <anton.tananaev@gmail.com> | 2015-11-16 14:04:27 +1300 |
|---|---|---|
| committer | Anton Tananaev <anton.tananaev@gmail.com> | 2015-11-16 14:04:27 +1300 |
| commit | e4f936e9732f5ad2e99553425d8c5c9222e486f2 (patch) | |
| tree | 07cb1ed032ae35b14b55a9859c749fedfdd7e2e4 | |
| parent | 28d60da9a2f80fa8fc3dd28ec5bdd7847a36727c (diff) | |
| download | traccar-server-e4f936e9732f5ad2e99553425d8c5c9222e486f2.tar.gz traccar-server-e4f936e9732f5ad2e99553425d8c5c9222e486f2.tar.bz2 traccar-server-e4f936e9732f5ad2e99553425d8c5c9222e486f2.zip | |
Add loading spinner to the webpage
| -rw-r--r-- | web/app.css | 38 | ||||
| -rw-r--r-- | web/app/controller/Root.js | 1 | ||||
| -rw-r--r-- | web/debug.html | 7 | ||||
| -rw-r--r-- | web/release.html | 7 |
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> |