Add LoadingIcon Component with SVG Animation
- Introduced a new LoadingIcon component that utilizes an SVG for a rotating loading animation. - Added loadingicon.svg file to assets/icons for the visual representation of the loading state. - Integrated the LoadingIcon component into the project for enhanced user experience during loading processes.
This commit is contained in:
parent
b2e35c965c
commit
088ef79b11
29
assets/icons/loadingicon.svg
Normal file
29
assets/icons/loadingicon.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
class="th-icon"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"
|
||||
>
|
||||
|
||||
<g>
|
||||
<path
|
||||
d="M32,5.131C46.829,5.131 58.869,17.171 58.869,32"
|
||||
style="fill:none;"
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XML"
|
||||
type="rotate"
|
||||
from="0 32 32"
|
||||
to="360 32 32"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 774 B |
6
src/components/Icons/LoadingIcon.jsx
Normal file
6
src/components/Icons/LoadingIcon.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import Icon from '@ant-design/icons'
|
||||
import CustomIconSvg from '../../../assets/icons/loadingicon.svg?react'
|
||||
|
||||
const LoadingIcon = (props) => <Icon component={CustomIconSvg} {...props} />
|
||||
|
||||
export default LoadingIcon
|
||||
Loading…
x
Reference in New Issue
Block a user