Add loading animation while we're bringing in the overlay & device markers

This commit is contained in:
Starbeamrainbowlabs 2019-06-30 18:11:36 +01:00
parent d5df81eed1
commit 25a1bf66d9
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 22 additions and 2 deletions

View file

@ -33,5 +33,9 @@ Contributions are welcome - feel free to [open an issue](https://github.com/Conn
The [issue tracker](https://github.com/ConnectedHumber/Air-Quality-Web/issues) is the place where all the tasks relating to the project are kept.
## Credits
- Map: [Leaflet.js](https://leafletjs.com/) showing [OpenStreetMaps](https://www.openstreetmap.org/)
- [Loading Animation](https://github.com/SamHerbert/SVG-Loaders)
## License
This project is licensed under the _Mozilla Public License 2.0_. The full text of this license can be found in the [LICENSE](https://github.com/ConnectedHumber/Air-Quality-Web/blob/master/LICENSE) file of this repository, along with a helpful summary of what you can and can't do provided by GitHub.

View file

@ -0,0 +1,2 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 1)" stroke="#1BB3E9" stroke-width="1.5"><circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="1;0;0;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;1;0;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;1;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;1;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;1;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;1;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;0;1;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="5" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;0;0;1" calcMode="linear" repeatCount="indefinite"/></circle></g></g></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -60,3 +60,16 @@ button.selected {
}
.working { cursor: progress; }
.working-visual::after {
content: "";
position: relative; top: 0; left: 0;
width: 100%; height: 100%;
display: block;
z-index: 10000;
background: url(images/spinning-circles.svg) center center / 25% no-repeat;
pointer-events: none;
}

View file

@ -9,7 +9,7 @@
<h1>Air Quality Map</h1>
<!-- Leaflet needs an id to attach to -->
<main id="map">
<main id="map" class="working-visual">
</main>

View file

@ -52,7 +52,8 @@ class MapManager {
this.setup_device_markers()
.then(() => console.info("[map] Device markers loaded successfully."))
.then(this.setup_overlay.bind(this))
.then(this.setup_layer_control.bind(this));
.then(this.setup_layer_control.bind(this))
.then(() => document.querySelector("main").classList.remove("working-visual"));
// Add the heatmap
// console.info("[map] Loading heatmap....");