💫 loading animation

ui/raw/index.js

@@ -1,4 +1,8 @@
 function dnswatch_search() {
+	// activate spinner
+	document.getElementById('loadani').style.visibility = 'visible';
+	document.getElementById('loadani').style.display = 'block';
+
 	// get domain
 	var domain = document.getElementById('dnswatch-search').value.toLowerCase();
 
@@ -89,6 +93,10 @@ function dnswatch_search() {
 			document.getElementById('results').innerHTML = table;
 			feather.replace();
 		}
+
+		// deactivate spinner
+		document.getElementById('loadani').style.visibility = 'hidden';
+		document.getElementById('loadani').style.display = 'none';
 	}
 
 	request.send(`domain=${ window.btoa(domain) }`);

ui/raw/index.pug

@@ -12,5 +12,8 @@
 		button#dnswatch-search-submit: i( data-feather='search' )
 		button#help: i( data-feather='help-circle' )
 	small Try "gnu.org", "wikipedia.com", "s.to" or your own website!
+	#loadani
+		#spinner
+		span loading...
 
 #results

ui/raw/index.sass

@@ -95,6 +95,22 @@ input, button
 		margin-top: 1rem
 		color: darken($c-fg, 30%)
 
+	#loadani
+		display: none
+		margin-top: 1rem
+		visibility: hidden
+		#spinner
+			animation: 1s linear infinite spinner
+			border: 2px solid transparent
+			border-bottom: 2px solid $c-blue
+			border-radius: .5rem
+			display: inline-block
+			height: 1rem
+			width: 1rem
+		span
+			color: $c-blue
+			margin-left: .5rem
+
 #results
 	table
 		margin-left: 25vw
@@ -142,3 +158,9 @@ input, button
 						height: 1.2rem
 						vertical-align: -.2rem
 						width: 1.2rem
+
+@keyframes spinner
+	0%
+		transform: rotate(0deg)
+	100%
+		transform: rotate(360deg)