@@ -87,7 +87,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
8787 <svg
8888 class = " rc-progress-circle"
8989 role = " presentation"
90- viewBox = " 0 0 100 100"
90+ viewBox = " -50 -50 100 100"
9191 >
9292 <defs >
9393 <linearGradient
@@ -109,30 +109,30 @@ exports[`Progress Circle should gradient works and circles have different gradie
109109 </defs >
110110 <circle
111111 class = " rc-progress-circle-trail"
112- cx = " 50 "
113- cy = " 50 "
112+ cx = " 0 "
113+ cy = " 0 "
114114 r = " 47"
115115 stroke = " #D9D9D9"
116116 stroke-linecap = " round"
117117 stroke-width = " 1"
118- 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;"
118+ style = " stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0 ; 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;"
119119 />
120120 <circle
121121 class = " rc-progress-circle-path"
122- cx = " 50 "
123- cy = " 50 "
122+ cx = " 0 "
123+ cy = " 0 "
124124 opacity = " 1"
125125 r = " 47"
126126 stroke = " url(#rc_progress_TEST_OR_SSR-gradient)"
127127 stroke-linecap = " round"
128128 stroke-width = " 6"
129- style = " stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; 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; transition-duration: 0s, 0s;"
129+ style = " stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; transform: rotate(-90deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
130130 />
131131 </svg >
132132 <svg
133133 class = " rc-progress-circle"
134134 role = " presentation"
135- viewBox = " 0 0 100 100"
135+ viewBox = " -50 -50 100 100"
136136 >
137137 <defs >
138138 <linearGradient
@@ -154,24 +154,24 @@ exports[`Progress Circle should gradient works and circles have different gradie
154154 </defs >
155155 <circle
156156 class = " rc-progress-circle-trail"
157- cx = " 50 "
158- cy = " 50 "
157+ cx = " 0 "
158+ cy = " 0 "
159159 r = " 47"
160160 stroke = " #D9D9D9"
161161 stroke-linecap = " round"
162162 stroke-width = " 1"
163- 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;"
163+ style = " stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0 ; 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;"
164164 />
165165 <circle
166166 class = " rc-progress-circle-path"
167- cx = " 50 "
168- cy = " 50 "
167+ cx = " 0 "
168+ cy = " 0 "
169169 opacity = " 1"
170170 r = " 47"
171171 stroke = " url(#rc_progress_TEST_OR_SSR-gradient)"
172172 stroke-linecap = " round"
173173 stroke-width = " 6"
174- style = " stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; 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; transition-duration: 0s, 0s;"
174+ style = " stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; transform: rotate(-90deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
175175 />
176176 </svg >
177177</div >
@@ -182,157 +182,157 @@ exports[`Progress Circle should show right gapPosition 1`] = `
182182 <svg
183183 class = " rc-progress-circle"
184184 role = " presentation"
185- viewBox = " 0 0 100 100"
185+ viewBox = " -50 -50 100 100"
186186 >
187187 <circle
188188 class = " rc-progress-circle-trail"
189- cx = " 50 "
190- cy = " 50 "
189+ cx = " 0 "
190+ cy = " 0 "
191191 r = " 47"
192192 stroke = " #D9D9D9"
193193 stroke-linecap = " square"
194194 stroke-width = " 1"
195- 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;"
195+ style = " stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 0 0 ; 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;"
196196 />
197197 <circle
198198 class = " rc-progress-circle-path"
199- cx = " 50 "
200- cy = " 50 "
199+ cx = " 0 "
200+ cy = " 0 "
201201 opacity = " 1"
202202 r = " 47"
203203 stroke-linecap = " square"
204204 stroke-width = " 6"
205- style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; 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; transition-duration: 0s, 0s;"
205+ style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; transform: rotate(305deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
206206 />
207207 </svg >
208208 <svg
209209 class = " rc-progress-circle"
210210 role = " presentation"
211- viewBox = " 0 0 100 100"
211+ viewBox = " -50 -50 100 100"
212212 >
213213 <circle
214214 class = " rc-progress-circle-trail"
215- cx = " 50 "
216- cy = " 50 "
215+ cx = " 0 "
216+ cy = " 0 "
217217 r = " 47"
218218 stroke = " #D9D9D9"
219219 stroke-linecap = " square"
220220 stroke-width = " 1"
221- 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;"
221+ style = " stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 0 0 ; 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;"
222222 />
223223 <circle
224224 class = " rc-progress-circle-path"
225- cx = " 50 "
226- cy = " 50 "
225+ cx = " 0 "
226+ cy = " 0 "
227227 opacity = " 1"
228228 r = " 47"
229229 stroke-linecap = " square"
230230 stroke-width = " 6"
231- style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; 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; transition-duration: 0s, 0s;"
231+ style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; transform: rotate(125deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
232232 />
233233 </svg >
234234 <svg
235235 class = " rc-progress-circle"
236236 role = " presentation"
237- viewBox = " 0 0 100 100"
237+ viewBox = " -50 -50 100 100"
238238 >
239239 <circle
240240 class = " rc-progress-circle-trail"
241- cx = " 50 "
242- cy = " 50 "
241+ cx = " 0 "
242+ cy = " 0 "
243243 r = " 47"
244244 stroke = " #D9D9D9"
245245 stroke-linecap = " square"
246246 stroke-width = " 1"
247- 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;"
247+ style = " stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 0 0 ; 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;"
248248 />
249249 <circle
250250 class = " rc-progress-circle-path"
251- cx = " 50 "
252- cy = " 50 "
251+ cx = " 0 "
252+ cy = " 0 "
253253 opacity = " 1"
254254 r = " 47"
255255 stroke-linecap = " square"
256256 stroke-width = " 6"
257- style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; 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; transition-duration: 0s, 0s;"
257+ style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; transform: rotate(215deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
258258 />
259259 </svg >
260260 <svg
261261 class = " rc-progress-circle"
262262 role = " presentation"
263- viewBox = " 0 0 100 100"
263+ viewBox = " -50 -50 100 100"
264264 >
265265 <circle
266266 class = " rc-progress-circle-trail"
267- cx = " 50 "
268- cy = " 50 "
267+ cx = " 0 "
268+ cy = " 0 "
269269 r = " 47"
270270 stroke = " #D9D9D9"
271271 stroke-linecap = " square"
272272 stroke-width = " 1"
273- 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;"
273+ style = " stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 0 0 ; 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;"
274274 />
275275 <circle
276276 class = " rc-progress-circle-path"
277- cx = " 50 "
278- cy = " 50 "
277+ cx = " 0 "
278+ cy = " 0 "
279279 opacity = " 1"
280280 r = " 47"
281281 stroke-linecap = " square"
282282 stroke-width = " 6"
283- style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; 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; transition-duration: 0s, 0s;"
283+ style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 166.52186393277898; transform: rotate(35deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
284284 />
285285 </svg >
286286 <svg
287287 class = " rc-progress-circle"
288288 role = " presentation"
289- viewBox = " 0 0 100 100"
289+ viewBox = " -50 -50 100 100"
290290 >
291291 <circle
292292 class = " rc-progress-circle-trail"
293- cx = " 50 "
294- cy = " 50 "
293+ cx = " 0 "
294+ cy = " 0 "
295295 r = " 47"
296296 stroke = " #D9D9D9"
297297 stroke-linecap = " round"
298298 stroke-width = " 1"
299- 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;"
299+ style = " stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 0 0 ; 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;"
300300 />
301301 <circle
302302 class = " rc-progress-circle-path"
303- cx = " 50 "
304- cy = " 50 "
303+ cx = " 0 "
304+ cy = " 0 "
305305 opacity = " 1"
306306 r = " 47"
307307 stroke-linecap = " round"
308308 stroke-width = " 6"
309- style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 169.52186393277898; 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; transition-duration: 0s, 0s;"
309+ style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 169.52186393277898; transform: rotate(305deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
310310 />
311311 </svg >
312312 <svg
313313 class = " rc-progress-circle"
314314 role = " presentation"
315- viewBox = " 0 0 100 100"
315+ viewBox = " -50 -50 100 100"
316316 >
317317 <circle
318318 class = " rc-progress-circle-trail"
319- cx = " 50 "
320- cy = " 50 "
319+ cx = " 0 "
320+ cy = " 0 "
321321 r = " 47"
322322 stroke = " #D9D9D9"
323323 stroke-linecap = " round"
324324 stroke-width = " 1"
325- 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;"
325+ style = " stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 0 0 ; 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;"
326326 />
327327 <circle
328328 class = " rc-progress-circle-path"
329- cx = " 50 "
330- cy = " 50 "
329+ cx = " 0 "
330+ cy = " 0 "
331331 opacity = " 1"
332332 r = " 47"
333333 stroke-linecap = " round"
334334 stroke-width = " 6"
335- style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 169.52186393277898; 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; transition-duration: 0s, 0s;"
335+ style = " stroke: #2db7f5; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 169.52186393277898; transform: rotate(305deg); transform-origin: 0 0 ; 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; transition-duration: 0s, 0s;"
336336 />
337337 </svg >
338338</div >
0 commit comments