Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(MatProgressSpinner): Progress spinner animation fails for floating point diameter values #20158

Closed
AlexLangdon opened this issue Aug 2, 2020 · 1 comment · Fixed by #20192
Closed

bug(MatProgressSpinner): Progress spinner animation fails for floating point diameter values #20158

AlexLangdon opened this issue Aug 2, 2020 · 1 comment · Fixed by #20192
Labels
area: material/progress-spinner P5 The team acknowledges the request but does not plan to address it, it remains open for discussion

Comments

@AlexLangdon
Copy link
Contributor

Reproduction

Create a progress spinner with an indeterminate mode and floating point diameter.

https://stackblitz.com/edit/components-issue-tcz3y5?file=src%2Fapp%2Fexample-component.html

Expected Behavior

The spinner should show a spinning animation.

Actual Behavior

The spinner appears as a complete circle. Screenshot below:

image

Notes

If the diameter is a floating point value it will have a period ‘.’ when converted to a string. This string is then used in the animation-name, but the animation-name CSS property does not support period ‘.’ characters. See https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

components/src/material/progress-spinner/progress-spinner.html

Line 28 in 294b8ee

[style.animation-name]="'mat-progress-spinner-stroke-rotate-' + diameter"

Worth noting that the float point diameters are supported for the spinners in determinate mode.

Environment

Angular: 10.0.7
CDK/Material: 10.1.1
Browser(s): Google Chrome Version 84.0.4147.105
Operating System: Windows 10 version 1909
@AlexLangdon AlexLangdon added the needs triage This issue needs to be triaged by the team label Aug 2, 2020
@AlexLangdon AlexLangdon changed the title bug(COMPONENT): TITLE bug(MatProgressSpinner): Progress spinner animation fails for floating point diameter values Aug 2, 2020
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 2, 2020
@AlexLangdon
fix(material/progress-spinner): Progress spinner animation fails for …
9b8e587 
…floating point diameter values

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes angular#20158
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 2, 2020
@AlexLangdon
fix(material/progress-spinner): spinner circle expands beyond the spe…
8a5d8bf 
…cified diameter

Fixes a bug in the Angular Material ‘progress-spinner’ component
where progress-spinners with a stroke width greater than 10 begin
to expand outside its specified diameter and parent element. This
is because the spinner radius calculation uses a constant stroke
width of 10 instead of the current stroke width. This fix also
allows values smaller than 11 and floating point values to be
used for the spinner custom diameters.

Fixes angular#20159
Fixes angular#20158
Fixes angular#19469
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 3, 2020
@AlexLangdon
fix(material/progress-spinner): Progress spinner animation fails for …
e3b2d7c 
…floating point diameter values

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes angular#20158
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 3, 2020
@AlexLangdon
fix(material/progress-spinner): spinner circle expands beyond the spe…
e76b9d3 
…cified diameter

Fixes a bug in the Angular Material ‘progress-spinner’ component
where progress-spinners with a stroke width greater than 10 begin
to expand outside its specified diameter and parent element. This
is because the spinner radius calculation uses a constant stroke
width of 10 instead of the current stroke width. This fix also
allows values smaller than 11 and floating point values to be
used for the spinner custom diameters.

Fixes angular#20159
Fixes angular#20158
Fixes angular#19469
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 3, 2020
@AlexLangdon
fix(material/progress-spinner): spinner circle expands beyond the spe…
e2d4249 
…cified diameter

Fixes a bug in the Angular Material ‘progress-spinner’ component
where progress-spinners with a stroke width greater than 10 begin
to expand outside its specified diameter and parent element. This
is because the spinner radius calculation uses a constant stroke
width of 10 instead of the current stroke width. This fix also
allows values smaller than 11 and floating point values to be
used for the spinner custom diameters.

Fixes angular#20159
Fixes angular#20158
Fixes angular#19469
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 4, 2020
@AlexLangdon
fix(material/progress-spinner): Progress spinner animation fails for …
f7c636f 
…floating point diameter values

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes angular#20158
@AlexLangdon AlexLangdon mentioned this issue Aug 4, 2020
Merged
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 4, 2020
@AlexLangdon
fix(material/progress-spinner): Progress spinner animation fails for …
dd2b0d6 
…floating point diameter values

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes angular#20158
@jelbourn jelbourn added area: material/progress-spinner P5 The team acknowledges the request but does not plan to address it, it remains open for discussion and removed needs triage This issue needs to be triaged by the team labels Aug 6, 2020
AlexLangdon added a commit to AlexLangdon/components that referenced this issue Aug 12, 2020
@AlexLangdon
fix(material/progress-spinner): spinner circle expands beyond the spe…
e22fb9d 
…cified diameter

Fixes a bug in the Angular Material ‘progress-spinner’ component
where progress-spinners with a stroke width greater than 10 begin
to expand outside its specified diameter and parent element. This
is because the spinner radius calculation uses a constant stroke
width of 10 instead of the current stroke width. This fix also
allows values smaller than 11 and floating point values to be
used for the spinner custom diameters.

Fixes angular#20159
Fixes angular#20158
Fixes angular#19469
This was referenced Aug 13, 2020
Closed
Closed
wagnermaciel pushed a commit that referenced this issue Aug 19, 2020
@AlexLangdon
fix(material/progress-spinner): Progress spinner animation fails for …
2c47b06 
…floating point diameter values (#20192)

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes #20158
wagnermaciel pushed a commit that referenced this issue Aug 19, 2020
@AlexLangdon @wagnermaciel
fix(material/progress-spinner): Progress spinner animation fails for …
c761d35 
…floating point diameter values (#20192)

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes #20158

(cherry picked from commit 2c47b06)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 19, 2020
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@AlexLangdon @wagnermaciel
fix(material/progress-spinner): Progress spinner animation fails for …
acedc02 
…floating point diameter values (angular#20192)

Fixes a bug in the Angular Material `progress-spinner` component where spinner animations do not
work for custom diameters with float point values. This is because the animation-name CSS style
on the spinner circle includes an unsupported period ‘.’ character when the diameter is a
float point number. An underscore can be substituted instead of a period to fix this.

Fixes angular#20158
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: material/progress-spinner P5 The team acknowledges the request but does not plan to address it, it remains open for discussion
Projects
None yet
Milestone
No milestone
2 participants
@jelbourn @AlexLangdon