@brightspace-ui/core 3.267.1 → 3.268.0

package/components/loading-spinner/loading-spinner.js

@@ -7,109 +7,105 @@ import { classMap } from 'lit/directives/class-map.js';
  */
 class LoadingSpinner extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 * Color of the animated bar
-			 * @type {string}
-			 * @default var(--d2l-color-celestine)
-			 */
-			color: { type: String },
-			/**
-			 * Height and width (px) of the spinner
-			 * @type {number}
-			 * @default 50
-			 */
-			size: { type: Number }
-		};
-	}
-	static get styles() {
-		return css`
+	static properties = {
+		/**
+		 * @ignore
+		 * Color of the animated bar
+		 * @type {string}
+		 * @default var(--d2l-color-celestine)
+		 */
+		color: { type: String },
+		/**
+		 * Height and width (px) of the spinner
+		 * @type {number}
+		 * @default 50
+		 */
+		size: { type: Number }
+	};
 
-			:host {
-				color: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
-				display: inline-block;
-				text-align: initial;
-			}
+	static styles = css`
+		:host {
+			color: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
+			display: inline-block;
+			text-align: initial;
+		}
 
-			:host([hidden]) {
-				display: none;
-			}
+		:host([hidden]) {
+			display: none;
+		}
 
-			.d2l-loading-spinner-wrapper {
-				height: var(--d2l-loading-spinner-size, 48px);
-				margin: auto;
-				overflow: hidden;
-				position: relative;
-				width: var(--d2l-loading-spinner-size, 48px);
-			}
-			svg {
-				background: radial-gradient(rgba(0, 0, 0, 0.42), transparent 70%); /* 70% ≈ 100%/sqrt(2) = radius of circle since corners lie on 100% of radial gradient */
-				height: 100%;
-				position: absolute;
-				top: 0;
-				width: 100%;
-			}
-			.outer-circle {
-				fill: white;
-				stroke: none;
-			}
-			.inner-circle {
-				fill: none;
-				stroke: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
-				stroke-width: 3;
-			}
+		.d2l-loading-spinner-wrapper {
+			height: var(--d2l-loading-spinner-size, 48px);
+			margin: auto;
+			overflow: hidden;
+			position: relative;
+			width: var(--d2l-loading-spinner-size, 48px);
+		}
+		svg {
+			background: radial-gradient(rgba(0, 0, 0, 0.42), transparent 70%); /* 70% ≈ 100%/sqrt(2) = radius of circle since corners lie on 100% of radial gradient */
+			height: 100%;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+		.outer-circle {
+			fill: white;
+			stroke: none;
+		}
+		.inner-circle {
+			fill: none;
+			stroke: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
+			stroke-width: 3;
+		}
 
-			.slice {
-				animation-duration: 1.5s;
-				animation-iteration-count: infinite;
-				animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
-				transform-origin: center;
-			}
-			.slice-1 {
-				animation-name: slicespin1;
-				transform: rotate(54deg);
-			}
-			.slice-2 {
-				animation-name: slicespin2;
-				transform: rotate(124deg);
-			}
-			.slice-3 {
-				animation-name: slicespin3;
-				transform: rotate(198deg);
-			}
-			.slice-4 {
-				animation-name: slicespin4;
-				transform: rotate(270deg);
-			}
-			.slice-5 {
-				animation-name: slicespin5;
-				transform: rotate(344deg);
-			}
+		.slice {
+			animation-duration: 1.5s;
+			animation-iteration-count: infinite;
+			animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+			transform-origin: center;
+		}
+		.slice-1 {
+			animation-name: slicespin1;
+			transform: rotate(54deg);
+		}
+		.slice-2 {
+			animation-name: slicespin2;
+			transform: rotate(124deg);
+		}
+		.slice-3 {
+			animation-name: slicespin3;
+			transform: rotate(198deg);
+		}
+		.slice-4 {
+			animation-name: slicespin4;
+			transform: rotate(270deg);
+		}
+		.slice-5 {
+			animation-name: slicespin5;
+			transform: rotate(344deg);
+		}
 
-			@keyframes slicespin1 {
-				0% { transform: rotate(54deg); }
-				80%, 100% { transform: rotate(430deg); }
-			}
-			@keyframes slicespin2 {
-				0%, 10% { transform: rotate(124deg); }
-				80%, 100% { transform: rotate(500deg); }
-			}
-			@keyframes slicespin3 {
-				0%, 20% { transform: rotate(198deg); }
-				80%, 100% { transform: rotate(574deg); }
-			}
-			@keyframes slicespin4 {
-				0%, 35% { transform: rotate(270deg); }
-				80%, 100% { transform: rotate(644deg); }
-			}
-			@keyframes slicespin5 {
-				80%, 100% { transform: rotate(720deg); }
-			}
+		@keyframes slicespin1 {
+			0% { transform: rotate(54deg); }
+			80%, 100% { transform: rotate(430deg); }
+		}
+		@keyframes slicespin2 {
+			0%, 10% { transform: rotate(124deg); }
+			80%, 100% { transform: rotate(500deg); }
+		}
+		@keyframes slicespin3 {
+			0%, 20% { transform: rotate(198deg); }
+			80%, 100% { transform: rotate(574deg); }
+		}
+		@keyframes slicespin4 {
+			0%, 35% { transform: rotate(270deg); }
+			80%, 100% { transform: rotate(644deg); }
+		}
+		@keyframes slicespin5 {
+			80%, 100% { transform: rotate(720deg); }
+		}
 
-		`;
-	}
+	`;
 
 	render() {
 		return html`