diff --git a/src/main.js b/src/main.js
index 2f5165aa..8a7cbf0d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -80,6 +80,12 @@ async function loadOlmWorker(paths) {
// see https://github.com/rollup/plugins/tree/master/packages/multi-entry
export async function main(container, paths) {
try {
+ const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+ if (isIE11) {
+ document.body.className += " ie11";
+ } else {
+ document.body.className += " not-ie11";
+ }
// to replay:
// const fetchLog = await (await fetch("/fetchlogs/constrainterror.json")).json();
// const replay = new ReplayRequester(fetchLog, {delay: false});
diff --git a/src/ui/web/common.js b/src/ui/web/common.js
index 2883652e..d6c4dddc 100644
--- a/src/ui/web/common.js
+++ b/src/ui/web/common.js
@@ -15,9 +15,18 @@ limitations under the License.
*/
export function spinner(t, extraClasses = undefined) {
- return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"},
- t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
- );
+ if (document.body.classList.contains("ie11")) {
+ return t.div({className: "spinner"}, [
+ t.div(),
+ t.div(),
+ t.div(),
+ t.div(),
+ ]);
+ } else {
+ return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"},
+ t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
+ );
+ }
}
/**
diff --git a/src/ui/web/css/spinner.css b/src/ui/web/css/spinner.css
index 62974da6..1548b9b6 100644
--- a/src/ui/web/css/spinner.css
+++ b/src/ui/web/css/spinner.css
@@ -32,24 +32,57 @@ limitations under the License.
}
}
-.spinner circle {
+.not-ie11 .spinner circle {
transform-origin: 50% 50%;
animation-name: spinner;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
- /**
- * TODO
- * see if with IE11 we can just set a static stroke state and make it rotate?
- */
stroke-dasharray: 0 0 85 85;
-
fill: none;
stroke: currentcolor;
stroke-width: 12;
stroke-linecap: butt;
}
+.ie11 .spinner {
+ display: inline-block;
+ position: relative;
+}
+
+.ie11 .spinner div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ padding: 2px;
+ border: 2px solid currentcolor;
+ border-radius: 50%;
+ animation: ie-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: currentcolor transparent transparent transparent;
+ width: var(--size);
+ height: var(--size);
+}
+
+.ie11 .spinner div:nth-child(1) {
+ animation-delay: -0.45s;
+}
+.ie11 .spinner div:nth-child(2) {
+ animation-delay: -0.3s;
+}
+.ie11 .spinner div:nth-child(3) {
+ animation-delay: -0.15s;
+}
+
+@keyframes ie-spinner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+
.spinner {
--size: 20px;
width: var(--size);
diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css
index 469e117f..f96adf6e 100644
--- a/src/ui/web/css/timeline.css
+++ b/src/ui/web/css/timeline.css
@@ -77,6 +77,6 @@ limitations under the License.
}
.GapView > div {
- flex: 1;
+ flex: 1 1 0;
margin-left: 10px;
}
diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html
index 43827afb..ecf328db 100644
--- a/src/ui/web/view-gallery.html
+++ b/src/ui/web/view-gallery.html
@@ -5,7 +5,7 @@
-
+