feat(module:progress): add indeterminate state #9677
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 11 | ||
| title: | ||
| zh-CN: 不确定进度 | ||
| en-US: Indeterminate | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 当无法确定任务的具体进度时，可以使用不确定状态的进度条，展示持续加载动画。 | ||
|
|
||
| ## en-US | ||
|
|
||
| When the exact progress of a task is unknown, use an indeterminate progress bar to show continuous loading animation. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| import { NzFlexModule } from 'ng-zorro-antd/flex'; | ||
| import { NzProgressModule } from 'ng-zorro-antd/progress'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-progress-indeterminate', | ||
| imports: [NzFlexModule, NzProgressModule], | ||
| template: ` | ||
| <div nz-flex nzVertical nzGap="small"> | ||
| <nz-progress [nzIndeterminate]="true"></nz-progress> | ||
| <nz-progress [nzIndeterminate]="true" nzStatus="exception"></nz-progress> | ||
| <nz-progress [nzIndeterminate]="true" nzStatus="success"></nz-progress> | ||
| <nz-progress [nzIndeterminate]="true" [nzShowInfo]="false"></nz-progress> | ||
| </div> | ||
| ` | ||
| }) | ||
| export class NzDemoProgressIndeterminateComponent {} | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -180,6 +180,19 @@ describe('progress', () => { | |
| ); | ||
| }); | ||
|
|
||
| it('should indeterminate work', () => { | ||
| fixture.detectChanges(); | ||
| expect(progress.nativeElement.firstElementChild!.classList).not.toContain('ant-progress-indeterminate'); | ||
|
|
||
| testComponent.indeterminate = true; | ||
| fixture.detectChanges(); | ||
| expect(progress.nativeElement.firstElementChild!.classList).toContain('ant-progress-indeterminate'); | ||
|
|
||
| // Should only work with line type | ||
| const progressBar = progress.nativeElement.querySelector('.ant-progress-bg'); | ||
| expect(progressBar).toBeTruthy(); | ||
| }); | ||
|
Contributor
There was a problem hiding this comment. The test correctly verifies the positive case for You could add this at the end of the test: // Should not work with other types
testComponent.type = 'circle';
fixture.detectChanges();
expect(progress.nativeElement.firstElementChild!.classList).not.toContain('ant-progress-indeterminate');
Comment on lines
+183
to
+194
There was a problem hiding this comment. The test could be more comprehensive. Consider adding assertions to verify: 1) that the progress bar width is set to 100% when indeterminate is true (the template sets |
||
|
|
||
| it('should support steps mode', () => { | ||
| testComponent.steps = 5; | ||
| testComponent.percent = 50; | ||
|
|
@@ -447,6 +460,7 @@ describe('progress', () => { | |
| [nzStrokeColor]="strokeColor" | ||
| [nzStrokeLinecap]="strokeLinecap" | ||
| [nzSteps]="steps" | ||
| [nzIndeterminate]="indeterminate" | ||
| ></nz-progress> | ||
| <ng-template #formatterTemplate let-percent>{{ percent }} / 100</ng-template> | ||
| ` | ||
|
|
@@ -463,6 +477,7 @@ export class NzTestProgressLineComponent { | |
| strokeLinecap: NzProgressStrokeLinecapType = 'round'; | ||
| steps?: number; | ||
| strokeColor?: NzProgressStrokeColorType; | ||
| indeterminate = false; | ||
| } | ||
|
|
||
| @Component({ | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -122,6 +122,31 @@ | |||||||||
| } | ||||||||||
| } | ||||||||||
|
|
||||||||||
| &-indeterminate&-line { | ||||||||||
| .@{progress-prefix-cls}-bg { | ||||||||||
| position: relative; | ||||||||||
| width: 100% !important; | ||||||||||
| overflow: hidden; | ||||||||||
|
Comment on lines
+127
to
+129
Contributor
There was a problem hiding this comment. The |
||||||||||
|
|
||||||||||
| &::before { | ||||||||||
| position: absolute; | ||||||||||
| top: 0; | ||||||||||
| bottom: 0; | ||||||||||
| left: 0; | ||||||||||
| width: 200%; | ||||||||||
| background-image: repeating-linear-gradient( | ||||||||||
| -45deg, | ||||||||||
| transparent, | ||||||||||
| transparent 8px, | ||||||||||
| rgba(255, 255, 255, 0.25) 8px, | ||||||||||
| rgba(255, 255, 255, 0.25) 16px | ||||||||||
| ); | ||||||||||
| animation: ~'@{ant-prefix}-progress-indeterminate' 1s linear infinite; | ||||||||||
| content: ''; | ||||||||||
| } | ||||||||||
| } | ||||||||||
| } | ||||||||||
|
|
||||||||||
| &-status-exception { | ||||||||||
| .@{progress-prefix-cls}-bg { | ||||||||||
| background-color: @error-color; | ||||||||||
|
|
@@ -207,4 +232,14 @@ | |||||||||
| } | ||||||||||
| } | ||||||||||
|
|
||||||||||
| @keyframes ~"@{ant-prefix}-progress-indeterminate" { | ||||||||||
| 0% { | ||||||||||
| transform: translateX(0); | ||||||||||
| } | ||||||||||
|
|
||||||||||
| 100% { | ||||||||||
|
There was a problem hiding this comment. The animation translate value of -22.627px is a magic number that could benefit from a comment explaining its derivation. This value represents the diagonal length of the 16px stripe pattern (16 * √2 ≈ 22.627px), which ensures the animation loops seamlessly with the repeating diagonal gradient. Adding a comment would improve maintainability.
Suggested change
|
||||||||||
| transform: translateX(-22.627px); | ||||||||||
| } | ||||||||||
| } | ||||||||||
|
|
||||||||||
| @import './rtl'; | ||||||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to the coding guidelines, all components should set
changeDetection: ChangeDetectionStrategy.OnPushin the@Componentdecorator. This is missing from this demo component but is present in all other demo components in the codebase. Adding this will improve performance by reducing unnecessary change detection cycles.