add progress bar demo

source/Ox.UI/themes/classic/css/classic.css

@@ -30,12 +30,29 @@ Bars
 }
 
 .OxThemeClassic .OxProgressbar {
+    border-color: rgb(176, 176, 176);
     background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(255, 255, 255));
     background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(255, 255, 255));
 }
 .OxThemeClassic .OxProgressbar > div {
-    background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
-    background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    border-color: rgb(176, 176, 176);
+    background-image:
+        -moz-repeating-linear-gradient(
+            -45deg, transparent 0, transparent 25%,
+            rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%,
+            transparent 50%, transparent 75%,
+            rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 100%
+        ),
+        -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    background-image:
+        -webkit-repeating-linear-gradient(
+            -45deg, transparent 0, transparent 25%,
+            rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%,
+            transparent 50%, transparent 75%,
+            rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 100%
+        ),
+        -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    background-size: 32px 32px, 16px 16px;
 }
 
 .OxThemeClassic .OxResizebar > .OxLine {

source/Ox.UI/themes/classic/svg/symbolDelete.svg

@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
-    <circle cx="128" cy="128" r="104" fill="none" stroke="#404040" stroke-width="48"/>
-    <line x1="40" y1="40" x2="216" y2="216" stroke="#404040" stroke-width="48"/>
+    <g stroke="#404040" stroke-width="48">
+        <circle cx="128" cy="128" r="104" fill="none"/>
+        <line x1="40" y1="40" x2="216" y2="216"/>
+    </g>
 </svg>

source/Ox.UI/themes/modern/css/modern.css

@@ -31,12 +31,29 @@ Bars
 }
 
 .OxThemeModern .OxProgressbar {
+    border-color: rgb(48, 48, 48);
     background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
     background: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
 }
 .OxThemeModern .OxProgressbar > div {
-    background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
-    background: -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
+    border-color: rgb(48, 48, 48);
+    background-image:
+        -moz-repeating-linear-gradient(
+            -45deg, transparent 0, transparent 25%,
+            rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.1) 50%,
+            transparent 50%, transparent 75%,
+            rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100%
+        ),
+        -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
+    background-image:
+        -webkit-repeating-linear-gradient(
+            -45deg, transparent 0, transparent 25%,
+            rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.1) 50%,
+            transparent 50%, transparent 75%,
+            rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100%
+        ),
+        -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
+    background-size: 32px 32px, 16px 16px;
 }
 
 .OxThemeModern .OxResizebar > .OxLine {

source/Ox.UI/themes/modern/svg/symbolDelete.svg

@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
-    <circle cx="128" cy="128" r="104" fill="none" stroke="#FFFFFF" stroke-width="48"/>
-    <line x1="40" y1="40" x2="216" y2="216" stroke="#FFFFFF" stroke-width="48"/>
+    <g stroke="#FFFFFF" stroke-width="48">
+        <circle cx="128" cy="128" r="104" fill="none"/>
+        <line x1="40" y1="40" x2="216" y2="216"/>
+    </g>
 </svg>