1 |
|
2 |
|
3 | :host {
|
4 | display: block;
|
5 | |
6 |
|
7 | height: 100px;
|
8 | width: 100px;
|
9 | |
10 |
|
11 |
|
12 | }
|
13 | :host svg {
|
14 | height: 100%;
|
15 | width: 100%;
|
16 | transform-origin: center; }
|
17 | :host path {
|
18 | fill: transparent;
|
19 | stroke: #00897b;
|
20 |
|
21 | stroke-width: 10px; }
|
22 | :host[color='accent'] path {
|
23 | stroke: #8e24aa; }
|
24 | :host[color='warn'] path {
|
25 | stroke: #e53935; }
|
26 | :host[mode='indeterminate'] {
|
27 | animation-duration: 5250ms, 2887.5ms;
|
28 | animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate;
|
29 | animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear;
|
30 | animation-iteration-count: infinite;
|
31 | transition: none; }
|
32 |
|
33 |
|
34 | @keyframes md-progress-circle-linear-rotate {
|
35 | 0% {
|
36 | transform: rotate(0deg); }
|
37 | 100% {
|
38 | transform: rotate(360deg); } }
|
39 |
|
40 | @keyframes md-progress-circle-sporadic-rotate {
|
41 | 12.5% {
|
42 | transform: rotate(135deg); }
|
43 | 25% {
|
44 | transform: rotate(270deg); }
|
45 | 37.5% {
|
46 | transform: rotate(405deg); }
|
47 | 50% {
|
48 | transform: rotate(540deg); }
|
49 | 62.5% {
|
50 | transform: rotate(675deg); }
|
51 | 75% {
|
52 | transform: rotate(810deg); }
|
53 | 87.5% {
|
54 | transform: rotate(945deg); }
|
55 | 100% {
|
56 | transform: rotate(1080deg); } }
|
57 |
|
58 |
|