Progress bar from CSS-Tricks

front-end/css/style.css

@@ -1,58 +1,196 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+* {
+	margin: 0;
+	padding: 0;
 }
 
-#progress {
-    display: block;
-    border: 1px solid black;
-    background: #00B7FF;
-    width: 0%;
-    height: 10px;
-    float:left;
+body {
+	padding: 50px;
+	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+	background: #333;
+	color: white;
 }
 
 button {
-  clear:both;
-  background: #3498db;
-  border-radius: 28px;
-  color: #fff;
-  font-size: 20px;
-  padding: 10px 20px 10px 20px;
-  text-decoration: none;
-  border:0;
-    float: left;
+	clear:both;
+	background: #3498db;
+	border-radius: 5px;
+	color: #fff;
+	padding: 10px 20px 10px 20px;
+	text-decoration: none;
+	border:0;
 }
 
+button:disabled {
+	background: #eee;
+	color: #aaa
+}
+
+
 button:hover {
-  background: #3cb0fd;
-  text-decoration: none;
+	background: #3cb0fd;
+	text-decoration: none;
 }
 
 
 label {
-    width: 215px;
-    float: left;
-    clear: both;
+	width: 215px;
+	display: inline-block;
 }
 
 select {
-    float: left;
-    width: 200px;
-    font-size: 15px;
+	width: 200px;
+	font-size: 15px;
 }
 footer {
-   position:fixed;
-   left:0px;
-   bottom:0px;
-   height:30px;
-   width:100%;
-   background: #3cb0fd;
-   color: white;
+	position:fixed;
+	left:0px;
+	bottom:0px;
+	height:30px;
+	width:100%;
+	background: #0568c6;
+	color: white;
 }
 
 footer span {
-    top: 5px;
-    left: 10px;
-    position: relative;
+	top: 5px;
+	left: 10px;
+	position: relative;
+}
+
+#progress {
+	width: 0;
+}
+
+#form div {
+	margin-bottom: 10px;
+	text-align: center;
+}
+#form label {
+	text-align: left;
+}
+/*
+* https://css-tricks.com/examples/ProgressBars/
+*/
+.meter {
+	height: 20px;  /* Can be anything */
+	position: relative;
+	margin: 60px 0 20px 0; /* Just for demo spacing */
+	background: #555;
+	-moz-border-radius: 25px;
+	-webkit-border-radius: 25px;
+	border-radius: 25px;
+	padding: 10px;
+	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
+	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
+	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
+}
+.meter > span {
+	display: block;
+	height: 100%;
+	-webkit-border-top-right-radius: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-moz-border-radius-topright: 8px;
+	-moz-border-radius-bottomright: 8px;
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+	-webkit-border-top-left-radius: 20px;
+	-webkit-border-bottom-left-radius: 20px;
+	-moz-border-radius-topleft: 20px;
+	-moz-border-radius-bottomleft: 20px;
+	border-top-left-radius: 20px;
+	border-bottom-left-radius: 20px;
+	background-color: rgb(43,194,83);
+	background-image: -webkit-gradient(
+			linear,
+			left bottom,
+			left top,
+			color-stop(0, rgb(43,194,83)),
+			color-stop(1, rgb(84,240,84))
+	);
+	background-image: -moz-linear-gradient(
+			center bottom,
+			rgb(43,194,83) 37%,
+			rgb(84,240,84) 69%
+	);
+	-webkit-box-shadow:
+			inset 0 2px 9px  rgba(255,255,255,0.3),
+			inset 0 -2px 6px rgba(0,0,0,0.4);
+	-moz-box-shadow:
+			inset 0 2px 9px  rgba(255,255,255,0.3),
+			inset 0 -2px 6px rgba(0,0,0,0.4);
+	box-shadow:
+			inset 0 2px 9px  rgba(255,255,255,0.3),
+			inset 0 -2px 6px rgba(0,0,0,0.4);
+	position: relative;
+	overflow: hidden;
+}
+.meter > span:after, .animate > span > span {
+	content: "";
+	position: absolute;
+	top: 0; left: 0; bottom: 0; right: 0;
+	background-image:
+			-webkit-gradient(linear, 0 0, 100% 100%,
+			color-stop(.25, rgba(255, 255, 255, .2)),
+			color-stop(.25, transparent), color-stop(.5, transparent),
+			color-stop(.5, rgba(255, 255, 255, .2)),
+			color-stop(.75, rgba(255, 255, 255, .2)),
+			color-stop(.75, transparent), to(transparent)
+			);
+	background-image:
+			-moz-linear-gradient(
+					-45deg,
+					rgba(255, 255, 255, .2) 25%,
+					transparent 25%,
+					transparent 50%,
+					rgba(255, 255, 255, .2) 50%,
+					rgba(255, 255, 255, .2) 75%,
+					transparent 75%,
+					transparent
+			);
+	z-index: 1;
+	-webkit-background-size: 50px 50px;
+	-moz-background-size: 50px 50px;
+	background-size: 50px 50px;
+	-webkit-animation: move 2s linear infinite;
+	-moz-animation: move 2s linear infinite;
+	-webkit-border-top-right-radius: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-moz-border-radius-topright: 8px;
+	-moz-border-radius-bottomright: 8px;
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+	-webkit-border-top-left-radius: 20px;
+	-webkit-border-bottom-left-radius: 20px;
+	-moz-border-radius-topleft: 20px;
+	-moz-border-radius-bottomleft: 20px;
+	border-top-left-radius: 20px;
+	border-bottom-left-radius: 20px;
+	overflow: hidden;
+}
+
+.animate > span:after {
+	display: none;
+}
+
+@-webkit-keyframes move {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 50px 50px;
+	}
+}
+
+@-moz-keyframes move {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 50px 50px;
+	}
+}
+.nostripes > span > span, .nostripes > span:after {
+	-webkit-animation: none;
+	-moz-animation: none;
+	background-image: none;
 }

front-end/index.html

@@ -6,24 +6,30 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <label for="ports">Select Port:</label>
-    <select title="Select a Serial/COM Port" id="ports" name="ports" disabled>
-
-    </select>
-
-    <label for="manifests">Select Binaries to Flash:</label>
-    <select title="Select Binaries to Flash" id="manifests" name="manifests" disabled>
-
-    </select>
-
-
-    <button id="flash-button" disabled>
-        Flash!
-    </button>
-
-    <div id="progress"></div>
-
-    <footer><span id="status"></span></footer>
+<div id="form">
+    <div>
+        <label for="ports">Select Port:</label>
+        <select title="Select a Serial/COM Port" id="ports" name="ports" disabled>
+
+        </select>
+    </div>
+    <div>
+        <label for="manifests">Select Binaries to Flash:</label>
+        <select title="Select Binaries to Flash" id="manifests" name="manifests" disabled>
+
+        </select>
+    </div>
+    <div>
+        <button id="flash-button" disabled>
+            Flash!
+        </button>
+    </div>
+</div>
+<div class="meter animate">
+    <span id="progress"><span></span></span>
+</div>
+
+<footer><span id="status"></span></footer>
 
 <!-- Javascript -->
 <script src="js/app.js" charset="utf-8"></script>