Loading style

playground.js

@@ -29,6 +29,16 @@ if (url) {
 	cssURL.value = url;
 }
 
+queryRerun.onclick = async e => {
+	if (!window.AST) {
+		return;
+	}
+
+	let query = selectQuery.value;
+	let result = await testQuery(query);
+	queryResults.textContent = JSON.stringify(result, null, "\t");
+}
+
 async function update() {
 	if (cssCode.value) {
 		try {
@@ -43,6 +53,7 @@ async function update() {
 	}
 	else if (cssURL.value) {
 		let url = cssURL.value;
+		cssURL.classList.add("loading");
 		let response = await fetch('https://cors-anywhere.herokuapp.com/' + url);
 		let css;
 		let mime = response.headers.get("Content-Type");
@@ -63,7 +74,9 @@ async function update() {
 			css = css.join("\n")
 		}
 
+		cssURL.classList.remove("loading");
 		cssCodeDisplay.textContent = css;
+
 		try {
 			AST = parse(css);
 		}
@@ -101,15 +114,7 @@ cssCode.addEventListener("input", evt => {
 	localStorage.cssCode = cssCode.value;
 });
 
-queryRerun.onclick = async e => {
-	if (!window.AST) {
-		return;
-	}
 
-	let query = selectQuery.value;
-	let result = await testQuery(query);
-	queryResults.textContent = JSON.stringify(result, null, "\t");
-}
 
 queryTab.addEventListener("tabselect", queryRerun.onclick);
 

style.css

@@ -4,6 +4,9 @@ body {
 
 input, textarea {
 	font: inherit;
+	border: 1px solid hsl(220 10% 80%);
+	border-radius: .2em;
+	padding: .2em .4em;
 }
 
 #cssForm label {
@@ -39,3 +42,14 @@ textarea {
 simple-tabs {
 	margin-top: .5em;
 }
+
+@keyframes loading {
+	from {
+		background-position-x: 200%;
+	}
+}
+
+#cssURL.loading {
+	background: linear-gradient(to right, hsl(220, 10%, 95%) 30%, white, hsl(220, 10%, 95%) 70%) 0 0 / 200% auto;
+	animation: loading 1s infinite linear;
+}