spinner

static/VectorizerCanvas.js

@@ -90,6 +90,46 @@ export class VectorizerCanvas extends HTMLElement {
 				#start-container{
 					display: flex;
 				}
+
+				.loader {
+					width: 20px;
+					height: 12px;
+					display: block;
+					margin: auto;
+					position: relative;
+					border-radius: 4px;
+					color: #000;
+					background: currentColor;
+					box-sizing: border-box;
+					animation: animloader 0.6s 0.3s ease infinite alternate;
+				}
+				.loader::after,
+				.loader::before {
+					content: '';  
+					box-sizing: border-box;
+					width: 20px;
+					height: 12px;
+					background: currentColor;
+					position: absolute;
+					border-radius: 4px;
+					top: 0;
+					right: 110%;
+					animation: animloader  0.6s ease infinite alternate;
+				}
+				.loader::after {
+					left: 110%;
+					right: auto;
+					animation-delay: 0.6s;
+				}
+
+				@keyframes animloader {
+					0% {
+						width: 20px;
+					}
+					100% {
+						width: 48px;
+					}
+				}
 			</style>
 			
 			
@@ -269,7 +309,8 @@ export class VectorizerCanvas extends HTMLElement {
 	activateImage(e){
 
 		this.shadow.getElementById("container").innerHTML = `
-			<h1 id="background-remover-title">Please hang on while we remove the background</h1>
+			<span class="loader"></span>
+			<h3 id="background-remover-title">Please hang on while we remove the background...</h3>
 			<div id="canvas-container"></div>
 			<img id="image"></img>
 			<canvas id="edge-canvas"></canvas>