Merge pull request #1636 from material-components/demo/circ

Elliott Marquez · web-flow · commit 21750ffe3199 · 2020-08-03T12:50:43.000-07:00
demo(circular-progress): add four color variant
diff --git a/demos/circular-progress/index.html b/demos/circular-progress/index.html
@@ -36,6 +36,12 @@
     .demo-progress-bar {
       --mdc-theme-primary: red;
     }
+    .demo-progress-bar-four-color {
+      --mdc-circular-progress-bar-color-1: #2196f3;
+      --mdc-circular-progress-bar-color-2: #e91e63;
+      --mdc-circular-progress-bar-color-3: #ffc107;
+      --mdc-circular-progress-bar-color-4: #03dac5;
+    }
   </style>
 </head>
 <body class="unresolved">
@@ -50,6 +56,8 @@ <h3>circular-progress: indeterminate</h3>
     <mwc-circular-progress indeterminate></mwc-circular-progress>
     <h3>circular-progress: custom color</h3>
     <mwc-circular-progress indeterminate class="demo-progress-bar"></mwc-circular-progress>
+    <h3>circular-progress: custom four color</h3>
+    <mwc-circular-progress-four-color indeterminate class="demo-progress-bar-four-color"></mwc-circular-progress>
   </main>
   <script nomodule src="index.es5.js"></script>
 </body>
diff --git a/demos/circular-progress/index.js b/demos/circular-progress/index.js
@@ -1,4 +1,5 @@
 import '@material/mwc-circular-progress';
+import '@material/mwc-circular-progress-four-color';
 import '@material/mwc-button';
 
 import '../shared/demo-header';

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import '@material/mwc-circular-progress';`
	`2`	`+import '@material/mwc-circular-progress-four-color';`
`2`	`3`	`import '@material/mwc-button';`
`3`	`4`
`4`	`5`	`import '../shared/demo-header';`