Skip to content

Commit 28178ce

Browse files
afc163afc163
committed
fix: gapPosition wrong position
1 parent a8ed052 commit 28178ce

File tree

2 files changed

+9
-9
lines changed

2 files changed

+9
-9
lines changed

‎src/Circle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const getCircleStyle = (
5555
stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
5656
strokeDasharray: `${perimeterWithoutGap}px ${perimeter}`,
5757
strokeDashoffset,
58-
transform: percent === 100 ? undefined : `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
58+
transform: `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
5959
transformOrigin: '50% 50%',
6060
transition:
6161
'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',

‎tests/__snapshots__/index.spec.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
114114
stroke="#D9D9D9"
115115
stroke-linecap="round"
116116
stroke-width="1"
117-
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;"
117+
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;"
118118
/>
119119
<circle
120120
class="rc-progress-circle-path"
@@ -158,7 +158,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
158158
stroke="#D9D9D9"
159159
stroke-linecap="round"
160160
stroke-width="1"
161-
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;"
161+
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;"
162162
/>
163163
<circle
164164
class="rc-progress-circle-path"
@@ -189,7 +189,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
189189
stroke="#D9D9D9"
190190
stroke-linecap="square"
191191
stroke-width="1"
192-
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;"
192+
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;"
193193
/>
194194
<circle
195195
class="rc-progress-circle-path"
@@ -214,7 +214,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
214214
stroke="#D9D9D9"
215215
stroke-linecap="square"
216216
stroke-width="1"
217-
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;"
217+
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;"
218218
/>
219219
<circle
220220
class="rc-progress-circle-path"
@@ -239,7 +239,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
239239
stroke="#D9D9D9"
240240
stroke-linecap="square"
241241
stroke-width="1"
242-
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;"
242+
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;"
243243
/>
244244
<circle
245245
class="rc-progress-circle-path"
@@ -264,7 +264,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
264264
stroke="#D9D9D9"
265265
stroke-linecap="square"
266266
stroke-width="1"
267-
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;"
267+
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;"
268268
/>
269269
<circle
270270
class="rc-progress-circle-path"
@@ -289,7 +289,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
289289
stroke="#D9D9D9"
290290
stroke-linecap="round"
291291
stroke-width="1"
292-
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;"
292+
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;"
293293
/>
294294
<circle
295295
class="rc-progress-circle-path"
@@ -314,7 +314,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
314314
stroke="#D9D9D9"
315315
stroke-linecap="round"
316316
stroke-width="1"
317-
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;"
317+
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;"
318318
/>
319319
<circle
320320
class="rc-progress-circle-path"

0 commit comments

Comments
 (0)