diff --git a/components/loading-spinner/loading-spinner.js b/components/loading-spinner/loading-spinner.js index a606cc90016..29630b64d92 100644 --- a/components/loading-spinner/loading-spinner.js +++ b/components/loading-spinner/loading-spinner.js @@ -38,11 +38,11 @@ class LoadingSpinner extends LitElement { } .d2l-loading-spinner-wrapper { - height: var(--d2l-loading-spinner-size, 50px); + height: var(--d2l-loading-spinner-size, 48px); margin: auto; overflow: hidden; position: relative; - width: var(--d2l-loading-spinner-size, 50px); + width: var(--d2l-loading-spinner-size, 48px); } svg { background: radial-gradient(rgba(0, 0, 0, 0.1), transparent 70%); /* 70% ≈ 100%/sqrt(2) = radius of circle since corners lie on 100% of radial gradient */ @@ -63,7 +63,7 @@ class LoadingSpinner extends LitElement { .inner-circle { fill: none; stroke: var(--d2l-loading-spinner-color, var(--d2l-color-celestine)); - stroke-width: 2; + stroke-width: 3; } .slice { @@ -119,11 +119,11 @@ class LoadingSpinner extends LitElement { render() { return html`
- + - - - + + + ${Array.from({ length: 5 }).map((_, i) => this.#renderSlice(i + 1))} @@ -147,8 +147,8 @@ class LoadingSpinner extends LitElement { }; classes[`slice-${index}`] = true; return svg` - - + + `; } diff --git a/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-color.png b/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-color.png index d25f77ebb85..d5548275604 100644 Binary files a/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-color.png and b/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-color.png differ diff --git a/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-size.png b/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-size.png index 0960e23e1f1..21b707d92fa 100644 Binary files a/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-size.png and b/components/loading-spinner/test/golden/loading-spinner/chromium/end-custom-size.png differ diff --git a/components/loading-spinner/test/golden/loading-spinner/chromium/end-default.png b/components/loading-spinner/test/golden/loading-spinner/chromium/end-default.png index 18679b78574..3f635d2321b 100644 Binary files a/components/loading-spinner/test/golden/loading-spinner/chromium/end-default.png and b/components/loading-spinner/test/golden/loading-spinner/chromium/end-default.png differ diff --git a/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-color.png b/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-color.png index 285427ce725..5c3a26d2314 100644 Binary files a/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-color.png and b/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-color.png differ diff --git a/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-size.png b/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-size.png index eba27904636..5d11676f91b 100644 Binary files a/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-size.png and b/components/loading-spinner/test/golden/loading-spinner/chromium/start-custom-size.png differ diff --git a/components/loading-spinner/test/golden/loading-spinner/chromium/start-default.png b/components/loading-spinner/test/golden/loading-spinner/chromium/start-default.png index 285427ce725..5c3a26d2314 100644 Binary files a/components/loading-spinner/test/golden/loading-spinner/chromium/start-default.png and b/components/loading-spinner/test/golden/loading-spinner/chromium/start-default.png differ