diff options
| author | James Barnett <noreply@jamesbarnett.xyz> | 2019-08-09 20:56:49 +0100 |
|---|---|---|
| committer | James Barnett <noreply@jamesbarnett.xyz> | 2019-08-09 20:56:49 +0100 |
| commit | 2bbcde7dd370f0f6eb6d8733aab697917f5a8963 (patch) | |
| tree | 53478f00d7a0c95ff2c2b4a703456aba7422a087 /src/main/resources | |
| parent | 3b1d5f080b013ab306fb9d356d6e3337c75c40c6 (diff) | |
| download | terrain-2bbcde7dd370f0f6eb6d8733aab697917f5a8963.tar.xz terrain-2bbcde7dd370f0f6eb6d8733aab697917f5a8963.zip | |
Add loading overlay during terrain gen
Diffstat (limited to 'src/main/resources')
| -rw-r--r-- | src/main/resources/index.html | 12 | ||||
| -rw-r--r-- | src/main/resources/presets.json | 2 | ||||
| -rw-r--r-- | src/main/resources/style.css | 45 |
3 files changed, 52 insertions, 7 deletions
diff --git a/src/main/resources/index.html b/src/main/resources/index.html index 20e95b7..cc41b60 100644 --- a/src/main/resources/index.html +++ b/src/main/resources/index.html @@ -12,16 +12,16 @@ <script type="text/javascript" src="kotlin/kotlin.js"></script> <script type="text/javascript" src="kotlin/threejs-wrapper.js"></script> <script type="text/javascript" src="kotlin/terrain.js"></script> - <style> - body { - padding: 0; - margin: 0; - } - </style> + + <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"></div> + <div id="loading-overlay" class="hidden"> + hello + <div id="spinner"></div> + </div> <script> new terrain.Terrain().animate() diff --git a/src/main/resources/presets.json b/src/main/resources/presets.json index 1cefb98..0c797b3 100644 --- a/src/main/resources/presets.json +++ b/src/main/resources/presets.json @@ -1,5 +1,5 @@ { - "preset": "Mountainous", + "preset": "Mountain", "remembered": { "Mountain": { "0": { diff --git a/src/main/resources/style.css b/src/main/resources/style.css new file mode 100644 index 0000000..4d69b30 --- /dev/null +++ b/src/main/resources/style.css @@ -0,0 +1,45 @@ +body { + padding: 0; + margin: 0; +} + +#loading-overlay { + width: 100%; + height: 100%; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,.5); +} + +#spinner { + width: 50px; + height: 50px; + margin-top: -40px; + margin-left: -40px; + + position: absolute; + top: 50%; + left: 50%; + + border-width: 120px; + border-radius: 50%; + border: 16px solid #33abda; + border-top: 16px solid #3c3c3c; + -webkit-animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +canvas { + display: block; +} + +.hidden { + display: none; +}
\ No newline at end of file |