material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 14:07:17 +03:00
Code Issues Projects Releases Wiki Activity

demo(circular-progress): add four color variant

Browse Source
This commit is contained in:
Allan Chen 2020-08-03 11:22:33 -07:00
parent 779853ff8d
commit 317724cf4d
2 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demos/circular-progress/index.html
View File

@ -36,6 +36,12 @@ limitations under the License.
.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 @@ limitations under the License.
<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>

1
demos/circular-progress/index.js
View File

@ -1,4 +1,5 @@
import '@material/mwc-circular-progress';
import '@material/mwc-circular-progress-four-color';
import '@material/mwc-button';
import '../shared/demo-header';