Skip to content

Commit cd24544

Browse files
desig9steindesig9stein
authored
[Progress bars]: Bundle theme styles with component (#15720)
1 parent e4ce7bb commit cd24544

29 files changed

+1096
-40
lines changed

‎projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -536,21 +536,21 @@
536536
// @include paginator($paginator-theme-map);
537537
// }
538538

539-
@if is-used('igx-circular-bar', $exclude) {
540-
$progress-circular-theme-map: progress-circular-theme(
541-
$schema: $schema,
542-
);
543-
$progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map);
544-
@include progress-circular($progress-circular-theme-map);
545-
}
539+
//@if is-used('igx-circular-bar', $exclude) {
540+
// $progress-circular-theme-map: progress-circular-theme(
541+
// $schema: $schema,
542+
// );
543+
// $progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map);
544+
// @include progress-circular($progress-circular-theme-map);
545+
//}
546546

547-
@if is-used('igx-linear-bar', $exclude) {
548-
$progress-linear-theme-map: progress-linear-theme(
549-
$schema: $schema,
550-
);
551-
$progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map);
552-
@include progress-linear($progress-linear-theme-map);
553-
}
547+
//@if is-used('igx-linear-bar', $exclude) {
548+
// $progress-linear-theme-map: progress-linear-theme(
549+
// $schema: $schema,
550+
// );
551+
// $progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map);
552+
// @include progress-linear($progress-linear-theme-map);
553+
//}
554554

555555
// @if is-used('igx-radio', $exclude) {
556556
// $radio-theme-map: radio-theme(

‎projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html renamed to ‎projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<svg #svg
22
role="progressbar"
33
aria-valuemin="0"
4+
[ngClass]="{'igx-circular-svg': true, 'igx-circular-svg--indeterminate': indeterminate}"
45
[attr.aria-valuemax]="max"
56
[attr.aria-valuenow]="value">
6-
<svg:circle class="igx-circular-bar__inner" />
7-
<svg:circle #circle class="igx-circular-bar__outer"/>
7+
<svg:circle class="igx-circular-svg__inner" />
8+
<svg:circle #circle class="igx-circular-bar__outer igx-circular-svg__outer"/>
89

910
<svg:defs>
1011
<ng-container
@@ -15,8 +16,8 @@
1516

1617
<ng-template #defaultGradientTemplate>
1718
<svg:linearGradient [id]="gradientId" gradientTransform="rotate(90)">
18-
<stop offset="0%" class="igx-circular-bar__gradient-start" />
19-
<stop offset="100%" class="igx-circular-bar__gradient-end" />
19+
<stop offset="0%" class="igx-circular-svg__gradient-start" />
20+
<stop offset="100%" class="igx-circular-svg__gradient-end" />
2021
</svg:linearGradient>
2122
</ng-template>
2223
</svg>

‎projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/progressbar/circular/themes/_animations.scss

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
$diameter: calc(var(--circular-size) + var(--stroke-thickness));
2+
$radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5);
3+
$circumference: calc(#{$radius} * 2 * 3.1416);
4+
5+
@keyframes igx-indeterminate-accordion {
6+
0% {
7+
stroke-dashoffset: calc(#{$circumference} * 2);
8+
stroke-dasharray: calc(#{$circumference} * 9 / 10);
9+
}
10+
11+
100% {
12+
stroke-dashoffset: calc(#{$circumference} * 2 / 5);
13+
}
14+
}
15+
16+
@keyframes igx-indeterminate-accordion-rtl {
17+
0% {
18+
stroke-dashoffset: calc(#{$circumference} * -2);
19+
stroke-dasharray: calc(#{$circumference} * 9 / 10);
20+
}
21+
22+
100% {
23+
stroke-dashoffset: calc(#{$circumference} * -2 / 5);
24+
}
25+
}
26+
27+
// Fluent: Circular progress animation for indeterminate state.
28+
// Dynamically changes stroke-dasharray and rotates for a smooth spinning effect.
29+
@keyframes igx-indeterminate-circular-fluent {
30+
0% {
31+
// Start the stroke at the correct position by adjusting the dasharray and dashoffset
32+
stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
33+
stroke-dashoffset: calc(-1 * #{$circumference} / 4);
34+
35+
// Start at 12 o'clock
36+
transform: rotate(-90deg);
37+
}
38+
39+
50% {
40+
stroke-dasharray: calc(#{$circumference} / 2), calc(#{$circumference} / 2);
41+
42+
// Adjust to keep starting point correct
43+
stroke-dashoffset: calc(-1 * #{$circumference} / 4);
44+
45+
// Continue rotating smoothly
46+
transform: rotate(360deg);
47+
}
48+
49+
100% {
50+
stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
51+
52+
// Reset properly
53+
stroke-dashoffset: calc(-1 * #{$circumference} / 4);
54+
55+
// Complete the full rotation
56+
transform: rotate(990deg);
57+
}
58+
}
59+
60+
@keyframes igx-indeterminate-circular-fluent-rtl {
61+
0% {
62+
stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
63+
64+
// Positive offset for opposite direction
65+
stroke-dashoffset: calc(#{$circumference} / 4);
66+
transform: rotate(90deg);
67+
}
68+
69+
50% {
70+
stroke-dasharray: calc(#{$circumference} / 2), calc(#{$circumference} / 2);
71+
72+
// Positive offset for opposite direction
73+
stroke-dashoffset: calc(#{$circumference} / 4);
74+
transform: rotate(-360deg);
75+
}
76+
77+
100% {
78+
stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
79+
80+
// Positive offset for opposite direction
81+
stroke-dashoffset: calc(#{$circumference} / 4);
82+
transform: rotate(-990deg);
83+
}
84+
}
85+
86+
@keyframes igx-initial-dashoffset {
87+
from {
88+
/* Start with no progress (0%) */
89+
stroke-dashoffset: #{$circumference};
90+
}
91+
92+
to {
93+
stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
94+
}
95+
}
96+
97+
// Generic animations
98+
@keyframes igc-initial-counter {
99+
from {
100+
--_progress-integer: 0;
101+
--_progress-fraction: 0;
102+
}
103+
}
104+
105+
@keyframes igx-rotate-center {
106+
0% {
107+
transform: rotate(0);
108+
}
109+
110+
100% {
111+
transform: rotate(360deg);
112+
}
113+
}

‎projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
@use 'sass:map';
2+
@use 'igniteui-theming/sass/typography/index' as *;
3+
@use 'igniteui-theming/sass/bem/index' as *;
4+
@use 'igniteui-theming/sass/themes/index' as *;
5+
@use 'igniteui-theming/sass/animations' as *;
6+
@use 'styles/themes/standalone' as *;
7+
@use 'light/tokens' as *;
8+
@use 'animations' as *;
9+
10+
$theme: $base;
11+
12+
%circle {
13+
width: 100%;
14+
height: 100%;
15+
fill: transparent;
16+
cx: calc(#{$diameter} / 2);
17+
cy: calc(#{$diameter} / 2);
18+
r: $radius;
19+
transform-origin: center;
20+
}
21+
@include layer(base) {
22+
@include b(igx-circular-bar) {
23+
--circular-size: calc(#{var-get($theme, 'diameter')} - var(--stroke-thickness));
24+
25+
display: inline-flex;
26+
align-items: center;
27+
justify-content: center;
28+
position: relative;
29+
30+
31+
@include e(text) {
32+
position: absolute;
33+
color: var-get($theme, 'text-color');
34+
font-size: round(calc(#{var-get($theme, 'diameter')} / var(--scale-factor) - var(--stroke-thickness)), 1px);
35+
line-height: normal;
36+
text-align: center;
37+
font-weight: 600;
38+
39+
animation: igx-initial-counter var(--_transition-duration) ease-in-out;
40+
counter-reset:
41+
progress-integer var(--_progress-integer, 0)
42+
progress-fraction var(--_progress-fraction, 0);
43+
transition:
44+
--_progress-integer var(--_transition-duration) ease-in-out,
45+
--_progress-fraction var(--_transition-duration) ease-in-out;
46+
}
47+
48+
@include e(text, $not: ('fraction')) {
49+
&::before {
50+
content: counter(progress-integer) '%';
51+
}
52+
}
53+
54+
@include e(value, $m: fraction) {
55+
&::before {
56+
content: counter(progress-integer) '.' counter(progress-fraction, decimal-leading-zero) '%';
57+
}
58+
}
59+
60+
@include m(indeterminate) {
61+
@include e(text) {
62+
visibility: hidden;
63+
}
64+
}
65+
66+
@each $modifier in ('danger', 'warning', 'info', 'success') {
67+
@include m($modifier) {
68+
@include e(outer) {
69+
stroke: var-get($theme, 'fill-color-#{$modifier}');
70+
}
71+
}
72+
}
73+
74+
@include m(animation-none) {
75+
--_transition-duration: 0s !important;
76+
}
77+
78+
@include m(hide-counter) {
79+
@include e(text) {
80+
&::before {
81+
display: none;
82+
}
83+
}
84+
}
85+
}
86+
87+
@include b(igx-circular-svg) {
88+
width: $diameter;
89+
height: $diameter;
90+
transform: rotate(-90deg);
91+
transform-origin: center;
92+
93+
@include e(gradient-start) {
94+
stop-color: var(--igx-circular-bar-fill-color-default-end, var(--fill-color-default-end));
95+
}
96+
97+
@include e(gradient-end) {
98+
stop-color: var(--igx-circular-bar-fill-color-default-start, var(--fill-color-default-start));
99+
}
100+
101+
@include e(inner) {
102+
@extend %circle;
103+
104+
stroke-width: var(--stroke-thickness);
105+
stroke: var-get($theme, 'base-circle-color');
106+
}
107+
108+
@include e(outer) {
109+
--_progress-percentage: calc(var(--_progress-whole, 0) / 100);
110+
111+
@extend %circle;
112+
113+
transition: stroke-dashoffset var(--_transition-duration) linear;
114+
115+
stroke: var-get($theme, 'fill-color-default');
116+
stroke-dasharray: #{$circumference} #{$circumference};
117+
stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
118+
}
119+
120+
@include m(indeterminate) {
121+
@include e(outer) {
122+
stroke-dashoffset: calc(#{$circumference} * 2);
123+
animation: igx-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite;
124+
}
125+
126+
&:dir(rtl) {
127+
@include e(outer) {
128+
stroke-dashoffset: calc(#{$circumference} + var(--_progress-percentage) * #{$circumference});
129+
}
130+
}
131+
}
132+
}
133+
134+
.igx-circular-svg:not(.igx-circular-svg--indeterminate) {
135+
.igx-circular-svg__outer {
136+
animation: igx-initial-dashoffset var(--_transition-duration) linear;
137+
stroke-dasharray: #{$circumference} #{$circumference};
138+
stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
139+
}
140+
141+
&:dir(rtl) {
142+
.igx-circular-svg__outer {
143+
animation: igx-initial-dashoffset-rtl var(--_transition-duration) linear;
144+
animation-direction: reverse;
145+
}
146+
}
147+
}
148+
}

‎projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-circular-bar, $tokens, dark);

‎projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_tokens.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes/index' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/progress' as *;
3+
4+
$base: digest-schema($dark-base-progress-circular);
5+
$material: digest-schema($dark-material-progress-circular);
6+
$bootstrap: digest-schema($dark-bootstrap-progress-circular);
7+
$fluent: digest-schema($dark-fluent-progress-circular);
8+
$indigo: digest-schema($dark-indigo-progress-circular);

‎projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-circular-bar, $tokens, light);

‎projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_tokens.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes/index' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/progress' as *;
3+
4+
$base: digest-schema($light-progress-circular);
5+
$material: digest-schema($material-progress-circular);
6+
$bootstrap: digest-schema($bootstrap-progress-circular);
7+
$fluent: digest-schema($fluent-progress-circular);
8+
$indigo: digest-schema($indigo-progress-circular);

0 commit comments

Comments
 (0)