Skip to content

Commit

Permalink
fix: gapPosition wrong position
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed May 8, 2022
1 parent a8ed052 commit 28178ce
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion src/Circle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const getCircleStyle = (
stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
strokeDasharray: `${perimeterWithoutGap}px ${perimeter}`,
strokeDashoffset,
transform: percent === 100 ? undefined : `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
transform: `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
transformOrigin: '50% 50%',
transition:
'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',
Expand Down
16 changes: 8 additions & 8 deletions tests/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
stroke="#D9D9D9"
stroke-linecap="round"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand Down Expand Up @@ -158,7 +158,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
stroke="#D9D9D9"
stroke-linecap="round"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand Down Expand Up @@ -189,7 +189,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
stroke="#D9D9D9"
stroke-linecap="square"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand All @@ -214,7 +214,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
stroke="#D9D9D9"
stroke-linecap="square"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand All @@ -239,7 +239,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
stroke="#D9D9D9"
stroke-linecap="square"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand All @@ -264,7 +264,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
stroke="#D9D9D9"
stroke-linecap="square"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand All @@ -289,7 +289,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
stroke="#D9D9D9"
stroke-linecap="round"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand All @@ -314,7 +314,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
stroke="#D9D9D9"
stroke-linecap="round"
stroke-width="1"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="rc-progress-circle-path"
Expand Down

0 comments on commit 28178ce

Please sign in to comment.