Added progress bar control (for the PC11 paper tape reader)

docs/pcx86/examples/components.css

@@ -50,6 +50,30 @@
     line-height: 20px;
     vertical-align: middle;
 }
+.pcjs-progress {
+    height: 20px;
+    width: 300px;
+    margin-top: 8px;
+    border: 1px solid black;
+    position: relative;
+}
+.pcjs-progress-bar {
+    height: 20px;
+    width: 0%;
+    background-color: gold;
+    position: absolute;
+    top: 0px;
+}
+.pcjs-progress-text {
+    height: 20px;
+    width: 300px;
+    font-size: small;
+    line-height: 20px;
+    text-align: center;
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+}
 .pcjs-register {
     font-family: Monaco, "Lucida Console", monospace;
     font-size: small;

docs/pcx86/examples/components.xsl

@@ -329,6 +329,7 @@
 				<xsl:when test="@pos = 'left'">float:left;</xsl:when>
 				<xsl:when test="@pos = 'right'">float:right;</xsl:when>
 				<xsl:when test="@pos = 'center'">margin:0 auto;</xsl:when>
+				<xsl:when test="@pos = 'default'">clear:both;</xsl:when>
 				<xsl:when test="@pos">position:<xsl:value-of select="@pos"/>;</xsl:when>
 				<xsl:when test="$left != '' or $top != ''">position:relative;</xsl:when>
 				<xsl:when test="@container">text-align:<xsl:value-of select="@container"/>;</xsl:when>
@@ -415,6 +416,12 @@
 				<xsl:when test="@type = 'led' or @type = 'rled'">
 					<div class="{$APPCLASS}-binding {$CSSCLASS}-{@type}" data-value="{{{$type},{$binding}}}" style="display:inline-block;"><xsl:value-of select="."/></div>
 				</xsl:when>
+				<xsl:when test="@type = 'progress'">
+					<div class="{$APPCLASS}-binding {$CSSCLASS}-{@type}" style="-webkit-user-select:none;{$border}{$width}{$height}{$fontsize}{$style}" data-value="{{{$type},{$binding},{$value}}}">
+						<div class="{$CSSCLASS}-{@type}-text" style="{$width}"><xsl:apply-templates/></div>
+						<div class="{$CSSCLASS}-{@type}-bar"></div>
+					</div>
+				</xsl:when>
 				<xsl:when test="@type = 'separator'">
 					<hr/>
 				</xsl:when>