react loading... 9 months ago
Full Screen Loading
export const FullScreenLoading = () => {
return (
<div className='loading-wrapper'>
<section>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><radialGradient id='a12' cx='.66' fx='.66' cy='.3125' fy='.3125' gradientTransform='scale(1.5)'><stop offset='0' stop-color='#FF156D'></stop><stop offset='.3' stop-color='#FF156D' stop-opacity='.9'></stop><stop offset='.6' stop-color='#FF156D' stop-opacity='.6'></stop><stop offset='.8' stop-color='#FF156D' stop-opacity='.3'></stop><stop offset='1' stop-color='#FF156D' stop-opacity='0'></stop></radialGradient><circle transform-origin='center' fill='none' stroke='url(#a12)' stroke-width='15' stroke-linecap='round' stroke-dasharray='200 1000' stroke-dashoffset='0' cx='100' cy='100' r='70'><animateTransform type='rotate' attributeName='transform' calcMode='spline' dur='2' values='360;0' keyTimes='0;1' keySplines='0 0 1 1' repeatCount='indefinite'></animateTransform></circle><circle transform-origin='center' fill='none' opacity='.2' stroke='#FF156D' stroke-width='15' stroke-linecap='round' cx='100' cy='100' r='70'></circle></svg>
<span className="loading-text">loading...</span>
</section>
</div>
)
}
.loading-wrapper {
background: black;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.loading-wrapper .loading-text {
color: #fff;
font-weight: bold;
}
简单案例:
const Test = () => {
const [isLoading, setIsLoading] = useState<boolean>(true)
useEffect(() => {
//mock http request
setTimeout(() => {
setIsLoading(false)
}, 2000)
}, [])
return (
<div>
{
isLoading ? <FullScreenLoading /> : <>news</>
}
</div>
)
}
Simple Loading
export const Loading = () => {
return (
<div className="simple-loading">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><radialGradient id='a12' cx='.66' fx='.66' cy='.3125' fy='.3125' gradientTransform='scale(1.5)'><stop offset='0' stop-color='#26BCFF'></stop><stop offset='.3' stop-color='#26BCFF' stop-opacity='.9'></stop><stop offset='.6' stop-color='#26BCFF' stop-opacity='.6'></stop><stop offset='.8' stop-color='#26BCFF' stop-opacity='.3'></stop><stop offset='1' stop-color='#26BCFF' stop-opacity='0'></stop></radialGradient><circle transform-origin='center' fill='none' stroke='url(#a12)' stroke-width='25' stroke-linecap='round' stroke-dasharray='200 1000' stroke-dashoffset='0' cx='100' cy='100' r='70'><animateTransform type='rotate' attributeName='transform' calcMode='spline' dur='0.8' values='360;0' keyTimes='0;1' keySplines='0 0 1 1' repeatCount='indefinite'></animateTransform></circle><circle transform-origin='center' fill='none' opacity='.2' stroke='#26BCFF' stroke-width='25' stroke-linecap='round' cx='100' cy='100' r='70'></circle></svg> </div>
)
}
.loading-wrapper .loading-text {
color: #fff;
font-weight: bold;
}
.simple-loading {
width: 100px;
height: 100px;
}