diff options
| author | David Stone <davidjamesstone@gmail.com> | 2019-04-25 18:20:10 +0100 |
|---|---|---|
| committer | Ryan Dahl <ry@tinyclouds.org> | 2019-04-25 13:20:10 -0400 |
| commit | 098d6fffabb85d102b3662dacf3173c47e551d34 (patch) | |
| tree | 55e1f050757b6ea8c0e3dcb9f86627f3df299ef1 | |
| parent | e725b26b289fbe96b679039ba4203f10f7229ab9 (diff) | |
Fix anchor links and add spinner to the benchmarks page (#2205)
| -rw-r--r-- | website/app.js | 2 | ||||
| -rw-r--r-- | website/benchmarks.html | 23 | ||||
| -rw-r--r-- | website/style.css | 30 |
3 files changed, 52 insertions, 3 deletions
diff --git a/website/app.js b/website/app.js index 7663e41f0..7af2875b2 100644 --- a/website/app.js +++ b/website/app.js @@ -194,7 +194,7 @@ export function drawCharts(dataUrl) { if (window["location"]["hostname"] != "deno.github.io") { dataUrl = "https://denoland.github.io/deno/" + dataUrl; } - drawChartsFromBenchmarkData(dataUrl); + return drawChartsFromBenchmarkData(dataUrl); } /** diff --git a/website/benchmarks.html b/website/benchmarks.html index 2432fedce..2f3a55cc8 100644 --- a/website/benchmarks.html +++ b/website/benchmarks.html @@ -9,6 +9,9 @@ <meta content="width=device-width, initial-scale=1.0" name="viewport" /> </head> <body> + <div id="spinner-overlay"> + <div class="spinner"></div>` + </div> <main> <a href="/"><img src="images/deno_logo_3.svg" width=200></a> <h1>Deno Continuous Benchmarks</h1> @@ -153,10 +156,26 @@ <script type="module"> import { drawCharts } from "./app.js"; window.chartWidth = 800; + const overlay = document.getElementById("spinner-overlay") - let u = window.location.hash.match("all") ? "./data.json" : "recent.json"; + function showSpinner () { + overlay.style.display = "block"; + } - drawCharts(u); + function hideSpinner () { + overlay.style.display = "none"; + } + + function updateCharts () { + const u = window.location.hash.match("all") ? "./data.json" : "recent.json"; + + showSpinner() + + drawCharts(u).finally(hideSpinner) + } + updateCharts() + + window.onhashchange = updateCharts </script> </body> </html> diff --git a/website/style.css b/website/style.css index 824814a32..d589771a3 100644 --- a/website/style.css +++ b/website/style.css @@ -101,3 +101,33 @@ code { .hljs { background: transparent; } + +#spinner-overlay { + display: none; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background: rgba(0, 0, 0, 0.3); +} + +@keyframes spinner { + to {transform: rotate(360deg);} +} + +.spinner:before { + content: ''; + box-sizing: border-box; + position: absolute; + top: 50%; + left: 50%; + width: 60px; + height: 60px; + margin-top: -10px; + margin-left: -10px; + border-radius: 50%; + border: 2px solid #ccc; + border-top-color: #000; + animation: spinner .6s linear infinite; +} |