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/components/StatusBar.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+
+export default function StatusBar(p)
+{
+    if(p.progress > 100) p.progress = 100;
+    let classNames = ["not-started", "started", "finished"];
+    let index = p.progress / 50;
+
+    return (
+        <div className={"step-container"}>
+            <div className={"steps"}>
+                <span className={"step " + classNames[index]}></span>
+                <span className={"step " + classNames[index]}></span>
+                <span className={"step " + classNames[index]}></span>
+                <div className={"progress-bar " + classNames[index]}
+                     style={{
+                         width: p.progress + "%"
+                     }}
+                ></div>
+            </div>
+        </div>
+    )
+}