Skip to content

Commit

Permalink
refactor(spinner): correct gradient
Browse files Browse the repository at this point in the history
  • Loading branch information
@hextion
hextion committed Nov 18, 2024
1 parent aae14d9 commit 13e3d0d
Show file tree
Hide file tree
Showing 6 changed files with 240 additions and 433 deletions.
264 changes: 88 additions & 176 deletions packages/button/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,59 +312,37 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<lineargradient
id=":r1:_top"
x1="0.05"
<mask
id=":r1:"
>
<stop
offset="0.1"
stop-color="currentColor"
stop-opacity="0"
<circle
cx="12"
cy="12"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-linecap="round"
stroke-width="2"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
/>
</lineargradient>
<lineargradient
id=":r1:_bottom"
x1="0.05"
>
<stop
offset="0"
stop-color="currentColor"
stop-opacity="1"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
/>
</lineargradient>
</mask>
</defs>
<g
stroke-width="2"
<foreignobject
height="24"
mask="url(#:r1:)"
width="24"
x="0"
y="0"
>
<path
d="M3,12 A9,9 0 0 1 21,12"
stroke="url(#:r1:_top)"
/>
<path
d="M21,12 A9,9 0 0 1 3,12"
stroke="url(#:r1:_bottom)"
/>
<path
d="M3,12 A9,9 0 0 1 3 12"
stroke="currentColor"
stroke-linecap="round"
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</g>
</foreignobject>
</svg>
</a>
</div>
Expand All @@ -377,59 +355,37 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<lineargradient
id=":r1:_top"
x1="0.05"
<mask
id=":r1:"
>
<stop
offset="0.1"
stop-color="currentColor"
stop-opacity="0"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
/>
</lineargradient>
<lineargradient
id=":r1:_bottom"
x1="0.05"
>
<stop
offset="0"
stop-color="currentColor"
stop-opacity="1"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
<circle
cx="12"
cy="12"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-linecap="round"
stroke-width="2"
/>
</lineargradient>
</mask>
</defs>
<g
stroke-width="2"
<foreignobject
height="24"
mask="url(#:r1:)"
width="24"
x="0"
y="0"
>
<path
d="M3,12 A9,9 0 0 1 21,12"
stroke="url(#:r1:_top)"
/>
<path
d="M21,12 A9,9 0 0 1 3,12"
stroke="url(#:r1:_bottom)"
/>
<path
d="M3,12 A9,9 0 0 1 3 12"
stroke="currentColor"
stroke-linecap="round"
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</g>
</foreignobject>
</svg>
</a>
</div>,
Expand Down Expand Up @@ -499,59 +455,37 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<lineargradient
id=":r0:_top"
x1="0.05"
<mask
id=":r0:"
>
<stop
offset="0.1"
stop-color="currentColor"
stop-opacity="0"
<circle
cx="12"
cy="12"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-linecap="round"
stroke-width="2"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
/>
</lineargradient>
<lineargradient
id=":r0:_bottom"
x1="0.05"
>
<stop
offset="0"
stop-color="currentColor"
stop-opacity="1"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
/>
</lineargradient>
</mask>
</defs>
<g
stroke-width="2"
<foreignobject
height="24"
mask="url(#:r0:)"
width="24"
x="0"
y="0"
>
<path
d="M3,12 A9,9 0 0 1 21,12"
stroke="url(#:r0:_top)"
/>
<path
d="M21,12 A9,9 0 0 1 3,12"
stroke="url(#:r0:_bottom)"
/>
<path
d="M3,12 A9,9 0 0 1 3 12"
stroke="currentColor"
stroke-linecap="round"
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</g>
</foreignobject>
</svg>
</button>
</div>
Expand All @@ -564,59 +498,37 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<lineargradient
id=":r0:_top"
x1="0.05"
<mask
id=":r0:"
>
<stop
offset="0.1"
stop-color="currentColor"
stop-opacity="0"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
/>
</lineargradient>
<lineargradient
id=":r0:_bottom"
x1="0.05"
>
<stop
offset="0"
stop-color="currentColor"
stop-opacity="1"
/>
<stop
offset="1"
stop-color="currentColor"
stop-opacity="0.3"
<circle
cx="12"
cy="12"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-linecap="round"
stroke-width="2"
/>
</lineargradient>
</mask>
</defs>
<g
stroke-width="2"
<foreignobject
height="24"
mask="url(#:r0:)"
width="24"
x="0"
y="0"
>
<path
d="M3,12 A9,9 0 0 1 21,12"
stroke="url(#:r0:_top)"
/>
<path
d="M21,12 A9,9 0 0 1 3,12"
stroke="url(#:r0:_bottom)"
/>
<path
d="M3,12 A9,9 0 0 1 3 12"
stroke="currentColor"
stroke-linecap="round"
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</g>
</foreignobject>
</svg>
</button>
</div>,
Expand Down
Loading

0 comments on commit 13e3d0d

Please sign in to comment.