[CircularProgress] should start at the top

[mpretty-cyro]

Problem description

Currently the CircularProgress indicator starts from the right (90 degrees), but should start from the top. The closest example I can find in https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators is the 'determinate' circular indicator, while it's spinning you can't really tell but when it finishes you can see that it finishes at the top of the circle.

Versions

• Material-UI: 0.15.0, 0.15.1, 0.15.2
• React: 15.2.1
• Browser: All

[peetzweg]

I was waiting for this to be fixed. However you could just use CSS3 transform to rotate it

const style = {
    transform: "rotate(-90deg)",
    webkitTransform: "rotate(-89deg)", // vendor prefix, cause it's still experimental in Safari. Also multiples of 90 degrees did not work for me, don't know why
}

<CircularProgress style={style} value={42} mode="determinate" />

[oliviertassinari]

@mpretty-cyro You are right, I have added this issue in #4757 so we don't forget it when migrating the component to the next branch.

[lilasquared]

@oliviertassinari I was wondering if it would be possible to have the stroke-linecap be configurable as well for the Circular Progress? One use case is that If you set the thickness to 1/2 the size and then set the linecap to 'butt' you get a really nice looking pie slice rather than a hoop. Any thoughts on that?

[slavab89]

I believe its possible to change the initial transform values inside the css to -90 and 270. here
The origin or the transformation of SVG is the center of the SVG however the rotation is always from the X Axis.
Can submit a small PR for this (2 lines basically)

[oliviertassinari]

@slavab89 Yes, a PR would be appreciated. Also, we haven't migrated determinate CircularProgress to the next branch yet.