5 files changed, 54 insertions, 1 deletions

diff --git a/cockpit/index.css b/cockpit/index.css
index a206067..a6435ad 100644
--- a/cockpit/index.css
+++ b/cockpit/index.css
@@ -35,6 +35,30 @@
   border-color: #0077ff;
 }
 
+#student-selection-loader {
+  --size: 0.5px;
+  width: calc(48 * var(--size));
+  height: calc(48 * var(--size));
+  border: calc(5 * var(--size)) solid black;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline;
+  position: absolute;
+  top: 20px;
+  right: 0.75rem;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 #student-selection-list {
   list-style: none;
 }
diff --git a/cockpit/index.html b/cockpit/index.html
index cea2c60..520b1f3 100644
--- a/cockpit/index.html
+++ b/cockpit/index.html
@@ -17,7 +17,8 @@
       class="student-selection"
       placeholder="Vorname Nachname Klasse"
     />
-    <button id="student-selection-clear" display="style: none;">&times;</button>
+    <button id="student-selection-clear" style="display: none;">&times;</button>
+    <span id="student-selection-loader" style="display: none;"></span>
   </div>
   <ul id="student-selection-list">
   </ul>
diff --git a/js/selection.js b/js/selection.js
index a1da244..eda20ae 100644
--- a/js/selection.js
+++ b/js/selection.js
@@ -16,8 +16,11 @@ async function initSelection(idPrefix, fetchCandidates, fmtCandidate, onSelectio
 	const list = document.getElementById(`${idPrefix}-list`);
 	const noResults = document.getElementById(`${idPrefix}-noresults`);
 	const clearBtn = document.getElementById(`${idPrefix}-clear`);
+	const loader = document.getElementById(`${idPrefix}-loader`);
 
+	loader.style.display = "unset";
 	const candidates = await fetchCandidates();
+	loader.style.display = "none";
 
 	let items = [];
 
diff --git a/mass-graducation/index.css b/mass-graducation/index.css
index a8790b8..c1c58a8 100644
--- a/mass-graducation/index.css
+++ b/mass-graducation/index.css
@@ -35,6 +35,30 @@
   border-color: #0077ff;
 }
 
+#group-selection-loader {
+  --size: 0.5px;
+  width: calc(48 * var(--size));
+  height: calc(48 * var(--size));
+  border: calc(5 * var(--size)) solid black;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline;
+  position: absolute;
+  top: 20px;
+  right: 0.75rem;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 #group-selection-list {
   list-style: none;
 }
diff --git a/mass-graducation/index.html b/mass-graducation/index.html
index 7a65745..481be41 100644
--- a/mass-graducation/index.html
+++ b/mass-graducation/index.html
@@ -17,6 +17,7 @@
         placeholder="Klasse"
       />
       <button id="group-selection-clear" style="display: none;">&times;</button>
+      <span id="group-selection-loader" style="display: none;"></span>
     </div>
     <ul id="group-selection-list">
     </ul>