Skip to content

Commit 448ab8d

Browse files
markrianmarkrian
committed
Show loading spinner
Also set the default background colour to black. In order for the spinner to not get blocked from displaying, the scripts and leaflet's stylesheet had to be deferred.
1 parent c8f7477 commit 448ab8d

File tree

7 files changed

+151
-66
lines changed

7 files changed

+151
-66
lines changed

‎index.html‎

Lines changed: 97 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,107 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Fractal</title>
88
<link rel="stylesheet" href="style.css">
9-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
9+
<style>
10+
html,
11+
body,
12+
#fractal {
13+
width: 100%;
14+
height: 100%;
15+
margin: 0;
16+
}
17+
18+
body, .leaflet-container {
19+
background-color: black;
20+
}
21+
22+
.mandelbrot-iterations-header {
23+
background-color: #f4f4f4;
24+
display: block;
25+
border-radius: 2px 2px 0 0;
26+
padding: 0 5px;
27+
line-height: 1.5;
28+
text-align: center;
29+
}
30+
31+
.mandelbrot-iterations-controls {
32+
display: flex;
33+
font: bold 18px 'Lucida Console', Monaco, monospace;
34+
}
35+
36+
.leaflet-touch .mandelbrot-iterations-controls {
37+
font-size: 22px;
38+
}
39+
40+
.leaflet-bar.mandelbrot-iterations a:first-child {
41+
border-radius: 0px 0px 0px 4px;
42+
border-bottom: none;
43+
border-right: 1px solid #ccc;
44+
}
45+
.leaflet-touch .leaflet-bar.mandelbrot-iterations a:first-child {
46+
border-radius: 0px 0px 0px 2px;
47+
}
48+
.leaflet-bar.mandelbrot-iterations a:last-child {
49+
border-radius: 0px 0px 4px 0px;
50+
}
51+
.leaflet-touch .leaflet-bar.mandelbrot-iterations a:last-child {
52+
border-radius: 0px 0px 2px 0px;
53+
}
54+
55+
.mandelbrot-iterations-more,
56+
.mandelbrot-iterations-fewer {
57+
font-size: 22px;
58+
}
59+
60+
.spinner, .spinner::after {
61+
position: absolute;
62+
box-sizing: border-box;
63+
border-radius: 50%;
64+
}
65+
66+
.spinner {
67+
top: 50%;
68+
left: 50%;
69+
width: 50vmin;
70+
height: 50vmin;
71+
border-top: .4rem solid red;
72+
border-bottom: .4rem solid lightgreen;
73+
transform: translate(-50%, -50%) rotate(0deg);
74+
animation: spin 1s linear infinite;
75+
transition: opacity .2s;
76+
z-index: 10000;
77+
}
78+
79+
.spinner::after {
80+
content: '';
81+
top: 0;
82+
bottom: 0;
83+
left: 0;
84+
right: 0;
85+
border-left: .4rem solid orange;
86+
border-right: .4rem solid cyan;
87+
}
88+
89+
@keyframes spin {
90+
to {
91+
transform: translate(-50%, -50%) rotate(360deg);
92+
}
93+
}
94+
95+
.transparent {
96+
opacity: 0;
97+
}
98+
99+
.hide {
100+
display: none;
101+
}
102+
</style>
103+
<script src="leaflet.js" defer></script>
104+
<script src="index.js" type="module" defer></script>
10105
</head>
11106

12107
<body>
108+
<div class="spinner"></div>
13109
<div id="fractal"></div>
14-
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
15-
<script src="index.js" type="module"></script>
16110
</body>
17111

18112
</html>

‎index.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import L from './leaflet-shim.js';
22
import ComplexPlaneCRS from './crs.js';
33
import MandelbrotLayer from './mandelbrot-layer.js';
4+
import { fadeOut, importCSS } from './util.js';
45
import './mandelbrot-iterations-control.js';
56
import './mandelbrot-hash-handler.js';
67

7-
const tileSize = 128;
8-
const map = L.map('fractal', {
9-
center: [0, 0],
10-
zoom: 0,
11-
zoomSnap: 0,
12-
crs: ComplexPlaneCRS(tileSize),
13-
iterationsControl: true,
14-
});
8+
importCSS('leaflet.css').then(() => {
9+
fadeOut(document.querySelector('.spinner'));
1510

16-
map.addLayer(new MandelbrotLayer({ tileSize }));
17-
map.mandelbrotHash.enable();
11+
const tileSize = 128;
12+
const map = L.map('fractal', {
13+
center: [0, 0],
14+
zoom: 0,
15+
zoomSnap: 0,
16+
crs: ComplexPlaneCRS(tileSize),
17+
iterationsControl: true,
18+
});
1819

19-
window.map = map;
20+
map.addLayer(new MandelbrotLayer({ tileSize }));
21+
map.mandelbrotHash.enable();
22+
window.map = map;
23+
});

‎leaflet-shim.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export default getLeaflet();
2-
31
function getLeaflet() {
42
if ('L' in window) {
53
return window.L;
64
}
75

86
throw new Error("Leaflet hasn't been loaded!");
97
}
8+
9+
export default getLeaflet();

‎package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@
88
"url": "https://github.com/markrian/mandelbrot.git"
99
},
1010
"scripts": {
11-
"build": "rm -rf dist && mkdir dist && cp *.js *.css *.html dist"
11+
"build": "rm -rf dist && mkdir dist && cp *.js *.css *.html dist && cp node_modules/leaflet/dist/leaflet.*s dist"
1212
},
1313
"keywords": [],
1414
"author": "Mark Florian <[email protected]>",
15-
"license": "ISC"
15+
"license": "ISC",
16+
"dependencies": {
17+
"leaflet": "^1.4.0"
18+
}
1619
}

‎style.css‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎util.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function importCSS(href) {
2+
return new Promise((resolve, reject) => {
3+
const link = document.createElement('link');
4+
link.onload = resolve;
5+
link.onerror = reject;
6+
link.rel = 'stylesheet';
7+
link.href = href;
8+
const head = document.head;
9+
head.insertBefore(link, head.firstChild);
10+
});
11+
}
12+
13+
export function fadeOut(element) {
14+
element.addEventListener('transitionend', () => {
15+
element.classList.add('hide');
16+
});
17+
18+
element.classList.add('transparent');
19+
}

0 commit comments

Comments
 (0)