diff options
| author | Alon Zakai <alonzakai@gmail.com> | 2014-01-24 15:03:31 -0800 |
|---|---|---|
| committer | Alon Zakai <alonzakai@gmail.com> | 2014-01-24 15:03:31 -0800 |
| commit | d54f3e0e933bbe33906edcb7ea372b829d3242c7 (patch) | |
| tree | 1b530ff4a0ad0c81d0ae6cba1f4891462c3cd4e6 | |
| parent | 4f5a270f09ff132eee8732f628c1f039decb2280 (diff) | |
spinner during startup; #2050
| -rw-r--r-- | src/shell.html | 43 |
1 files changed, 40 insertions, 3 deletions
diff --git a/src/shell.html b/src/shell.html index efb9e91d..7a3a8d08 100644 --- a/src/shell.html +++ b/src/shell.html @@ -11,10 +11,44 @@ div.emscripten_border { border: 1px solid black; } /* the canvas *must not* have any border or padding, or mouse coords will be wrong */ canvas.emscripten { border: 0px none; } + + .spinner { + height: 50px; + width: 50px; + margin: 0px auto; + -webkit-animation: rotation .8s linear infinite; + -moz-animation: rotation .8s linear infinite; + -o-animation: rotation .8s linear infinite; + animation: rotation 0.8s linear infinite; + border-left: 10px solid rgb(0,150,240); + border-right: 10px solid rgb(0,150,240); + border-bottom: 10px solid rgb(0,150,240); + border-top: 10px solid rgb(100,0,200); + border-radius: 100%; + background-color: rgb(200,100,250); + } + @-webkit-keyframes rotation { + from {-webkit-transform: rotate(0deg);} + to {-webkit-transform: rotate(360deg);} + } + @-moz-keyframes rotation { + from {-moz-transform: rotate(0deg);} + to {-moz-transform: rotate(360deg);} + } + @-o-keyframes rotation { + from {-o-transform: rotate(0deg);} + to {-o-transform: rotate(360deg);} + } + @keyframes rotation { + from {transform: rotate(0deg);} + to {transform: rotate(360deg);} + } + </style> </head> <body> <hr/> + <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure> <div class="emscripten" id="status">Downloading...</div> <div class="emscripten"> <progress value="0" max="100" id="progress" hidden=1></progress> @@ -35,7 +69,10 @@ <textarea class="emscripten" id="output" rows="8"></textarea> <hr> <script type='text/javascript'> - // connect to canvas + var statusElement = document.getElementById('status'); + var progressElement = document.getElementById('progress'); + var spinnerElement = document.getElementById('spinner'); + var Module = { preRun: [], postRun: [], @@ -68,17 +105,17 @@ var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); var now = Date.now(); if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon - var statusElement = document.getElementById('status'); - var progressElement = document.getElementById('progress'); if (m) { text = m[1]; progressElement.value = parseInt(m[2])*100; progressElement.max = parseInt(m[4])*100; progressElement.hidden = false; + spinnerElement.hidden = false; } else { progressElement.value = null; progressElement.max = null; progressElement.hidden = true; + if (!text) spinnerElement.hidden = true; } statusElement.innerHTML = text; }, |