StatusBar Component

Implemented a basic status bar with 3 dots, that is able to show 3 states. The length of the status line can be controlled by a paramter called "progress". Every value between 0 and 100 is valid. The Progress bar will change its color depending on the value of "progress"

anwendung/src/styles/globals.css

@@ -4,7 +4,7 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
+  --background-start-rgb: 255, 255, 255;
   --background-end-rgb: 255, 255, 255;
 }
 
@@ -24,8 +24,14 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+/*
+Button
+ */
 .round-border
 {
   border-radius: 10px;
@@ -56,3 +62,54 @@ body {
 {
   background-color: #585858;
 }
+
+/*
+Step Progress Bar
+ */
+.step-container
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 400px;
+}
+
+.steps
+{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  width: 100%;
+  position: relative;
+}
+
+.step
+{
+  width: 40px; height: 40px;
+  border-radius: 50%;
+}
+
+.steps .not-started
+{
+  background-color: #e10000;
+}
+
+.steps .started
+{
+  background-color: #ecc700;
+}
+
+.steps .finished
+{
+  background-color: #46be10;
+}
+
+.progress-bar
+{
+  position: absolute;
+  height: 8px;
+  background-color: #5d606e;
+  z-index: -1;
+}