Skip to content

Commit 4bdfcf9

Browse files
marcosmouramarcosmoura
committed
create progress bars
1 parent 41a0dbb commit 4bdfcf9

File tree

6 files changed

+212
-29
lines changed

6 files changed

+212
-29
lines changed

‎docs/src/pages/components/Progress.vue‎

Lines changed: 76 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,15 @@
2323

2424
<md-table-body>
2525
<md-table-row>
26-
<md-table-cell>empty</md-table-cell>
27-
<md-table-cell><code>Type</code></md-table-cell>
28-
<md-table-cell>Description</md-table-cell>
26+
<md-table-cell>md-indeterminate</md-table-cell>
27+
<md-table-cell><code>Boolean</code></md-table-cell>
28+
<md-table-cell>Enable the indeterminate state. Default <code>false</code></md-table-cell>
29+
</md-table-row>
30+
31+
<md-table-row>
32+
<md-table-cell>md-progress</md-table-cell>
33+
<md-table-cell><code>Number</code></md-table-cell>
34+
<md-table-cell>Define the current progress of the progress. Default <code>0</code></md-table-cell>
2935
</md-table-row>
3036
</md-table-body>
3137
</md-table>
@@ -35,24 +41,56 @@
3541
<div slot="example">
3642
<example-box card-title="Determinate">
3743
<div class="progress-demo" slot="demo">
38-
<md-progress></md-progress>
44+
<div class="progress-area">
45+
<md-progress :md-progress="progress" v-if="transition"></md-progress>
46+
<md-progress class="md-accent" :md-progress="progress" v-if="transition"></md-progress>
47+
<md-progress class="md-warn" :md-progress="progress" v-if="transition"></md-progress>
48+
</div>
49+
50+
<md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
3951
</div>
4052

4153
<div slot="code">
4254
<code-block lang="xml">
43-
55+
&lt;md-progress :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
56+
&lt;md-progress class=&quot;md-accent&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
57+
&lt;md-progress class=&quot;md-warn&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
4458
</code-block>
4559
</div>
4660
</example-box>
4761

4862
<example-box card-title="Indeterminate">
4963
<div class="progress-demo" slot="demo">
50-
<md-progress></md-progress>
64+
<div class="progress-area">
65+
<md-progress md-indeterminate v-if="transition"></md-progress>
66+
<md-progress class="md-accent" md-indeterminate v-if="transition"></md-progress>
67+
<md-progress class="md-warn" md-indeterminate v-if="transition"></md-progress>
68+
</div>
5169
</div>
5270

5371
<div slot="code">
5472
<code-block lang="xml">
73+
&lt;md-progress md-indeterminate&gt;&lt;/md-progress&gt;
74+
&lt;md-progress class=&quot;md-accent&quot; md-indeterminate&gt;&lt;/md-progress&gt;
75+
&lt;md-progress class=&quot;md-warn&quot; md-indeterminate&gt;&lt;/md-progress&gt;
76+
</code-block>
77+
</div>
78+
</example-box>
5579

80+
<example-box card-title="Themes">
81+
<div class="progress-demo" slot="demo">
82+
<div class="progress-area">
83+
<md-progress md-theme="orange" md-indeterminate v-if="transition"></md-progress>
84+
<md-progress md-theme="green" :md-progress="progress" v-if="transition"></md-progress>
85+
<md-progress md-theme="purple" md-indeterminate v-if="transition"></md-progress>
86+
</div>
87+
</div>
88+
89+
<div slot="code">
90+
<code-block lang="xml">
91+
&lt;md-progress md-theme=&quot;orange&quot; md-indeterminate&gt;&lt;/md-progress&gt;
92+
&lt;md-progress md-theme=&quot;green&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
93+
&lt;md-progress md-theme=&quot;purple&quot; md-indeterminate&gt;&lt;/md-progress&gt;
5694
</code-block>
5795
</div>
5896
</example-box>
@@ -62,19 +100,49 @@
62100
</template>
63101

64102
<style lang="scss" scoped>
103+
.progress-area {
104+
height: 44px;
65105
106+
+ .md-button {
107+
margin: 16px 0 0;
108+
}
109+
}
110+
111+
.md-progress {
112+
margin-bottom: 16px;
113+
}
66114
</style>
67115

68116
<script>
69117
export default {
70118
data: () => ({
71-
119+
progress: 0,
120+
progressInterval: null,
121+
transition: true
72122
}),
73123
methods: {
124+
startProgress() {
125+
this.progressInterval = window.setInterval(() => {
126+
this.progress += 3;
127+
128+
if (this.progress > 100) {
129+
window.clearInterval(this.progressInterval);
130+
}
131+
}, 100);
132+
},
133+
restartProgress() {
134+
this.progress = 0;
135+
this.transition = false;
74136
137+
window.clearInterval(this.progressInterval);
138+
window.setTimeout(() => {
139+
this.transition = true;
140+
this.startProgress();
141+
}, 600);
142+
}
75143
},
76144
mounted() {
77-
console.log(this.$material);
145+
this.startProgress();
78146
}
79147
};
80148
</script>

‎src/components/mdProgress/mdProgress.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,84 @@
11
@import '../../core/stylesheets/variables.scss';
22

33
.md-progress {
4+
width: 100%;
5+
height: 4px;
6+
position: relative;
7+
overflow: hidden;
8+
transition: $swift-ease-out;
49

10+
&.md-indeterminate .md-progress-track {
11+
right: 0;
12+
13+
&:before,
14+
&:after {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
left: 0;
19+
will-change: left, right;
20+
content: '';
21+
}
22+
23+
&:before {
24+
animation: progress-indeterminate 2.3s cubic-bezier(.65, .815, .735, .395) infinite;
25+
}
26+
27+
&:after {
28+
animation: progress-indeterminate-short 2.3s cubic-bezier(.165, .84, .44, 1) infinite;
29+
animation-delay: 1.15s;
30+
}
31+
}
32+
33+
&.md-progress-enter,
34+
&.md-progress-leave-active {
35+
opacity: 0;
36+
transform: scaleY(0) translateZ(0);
37+
}
38+
39+
&.md-progress-enter-active {
40+
transform: scaleY(1) translateZ(0);
41+
}
42+
}
43+
44+
.md-progress-track {
45+
position: absolute;
46+
top: 0;
47+
bottom: 0;
48+
left: 0;
49+
transition: $swift-ease-out;
50+
}
51+
52+
@keyframes progress-indeterminate {
53+
0% {
54+
right: 100%;
55+
left: -35%;
56+
}
57+
58+
60% {
59+
right: -100%;
60+
left: 100%;
61+
}
62+
63+
100% {
64+
right: -100%;
65+
left: 100%;
66+
}
67+
}
68+
69+
@keyframes progress-indeterminate-short {
70+
0% {
71+
right: 100%;
72+
left: -200%;
73+
}
74+
75+
60% {
76+
right: -8%;
77+
left: 107%;
78+
}
79+
80+
100% {
81+
right: -8%;
82+
left: 107%;
83+
}
584
}

‎src/components/mdProgress/mdProgress.theme‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,46 @@
11
.THEME_NAME {
22
&.md-progress {
3+
background-color: #{'PRIMARY-COLOR-0.38'};
34

5+
&:not(.md-indeterminate) .md-progress-track {
6+
background-color: #{'PRIMARY-COLOR'};
7+
}
8+
9+
.md-progress-track {
10+
&:after,
11+
&:before {
12+
background-color: #{'PRIMARY-COLOR'};
13+
}
14+
}
15+
16+
&.md-accent {
17+
background-color: #{'ACCENT-COLOR-0.38'};
18+
19+
&:not(.md-indeterminate) .md-progress-track {
20+
background-color: #{'ACCENT-COLOR'};
21+
}
22+
23+
.md-progress-track {
24+
&:after,
25+
&:before {
26+
background-color: #{'ACCENT-COLOR'};
27+
}
28+
}
29+
}
30+
31+
&.md-warn {
32+
background-color: #{'WARN-COLOR-0.38'};
33+
34+
&:not(.md-indeterminate) .md-progress-track {
35+
background-color: #{'WARN-COLOR'};
36+
}
37+
38+
.md-progress-track {
39+
&:after,
40+
&:before {
41+
background-color: #{'WARN-COLOR'};
42+
}
43+
}
44+
}
445
}
546
}

‎src/components/mdProgress/mdProgress.vue‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<transition name="md-progress" appear>
3-
<div class="md-progress" :class="[themeClass, classes]":style="styles">
3+
<div class="md-progress" :class="[themeClass, classes]">
4+
<div class="md-progress-track" :style="styles"></div>
45
</div>
56
</transition>
67
</template>
@@ -12,26 +13,26 @@
1213
1314
export default {
1415
props: {
15-
16+
mdIndeterminate: Boolean,
17+
mdProgress: {
18+
type: Number,
19+
default: 0
20+
}
1621
},
1722
mixins: [theme],
1823
computed: {
1924
classes() {
2025
return {
21-
26+
'md-indeterminate': this.mdIndeterminate
2227
};
2328
},
2429
styles() {
25-
return {
26-
27-
};
30+
if (!this.mdIndeterminate) {
31+
return {
32+
width: this.mdProgress + '%'
33+
};
34+
}
2835
}
29-
},
30-
data: () => ({
31-
32-
}),
33-
methods: {
34-
3536
}
3637
};
3738
</script>

‎src/components/mdSpinner/mdSpinner.theme‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
.THEME_NAME {
22
&.md-spinner {
33
.md-spinner-path {
4-
stroke: #{'PRIMARY-COLOR'}
4+
stroke: #{'PRIMARY-COLOR'};
55
}
66

77
&.md-accent {
88
.md-spinner-path {
9-
stroke: #{'ACCENT-COLOR'}
9+
stroke: #{'ACCENT-COLOR'};
1010
}
1111
}
1212

1313
&.md-warn {
1414
.md-spinner-path {
15-
stroke: #{'WARN-COLOR'}
15+
stroke: #{'WARN-COLOR'};
1616
}
1717
}
1818
}

‎src/components/mdSpinner/mdSpinner.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,6 @@
5757
5858
return `${progress}, 200`;
5959
}
60-
},
61-
data: () => ({
62-
63-
}),
64-
methods: {
65-
6660
}
6761
};
6862
</script>

0 commit comments

Comments
 (0)