import React from 'react'
function Loader(){
import React from 'react'
function Loader(){
return(
<>
<div className="loaderIcon"></div>
<style jsx>
{`
.loaderIcon{
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #3498bd;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
@keyframes spin{
0% { transform: rotate(0deg);}
100% { transform rotate(360deg);}
}
`}
</style>
</>
)
}
export default Loader;
}
export default Loader;
Componente LoadingButton:
import React, {useState} from 'react';
import Loader from '../components/loader'
function ButtonLoading(){
import React, {useState} from 'react';
import Loader from '../components/loader'
function ButtonLoading(){
const [loading, setLoading] = useState(false)
function loadData(){
setLoading ({loading: false})
setTimeout(()=>{
setLoading({loading: true});
}, 1000);
}
return(
<>
<div>
<button className="btnLoading" onClick={loadData} disabled={loading}>
{loading &&(<Loader/>)}
{loading && <span className="oneSpan">Cargando pagina</span>}
{!loading && <span className="twoSpan">Cargar Datos</span>}
</button>
</div>
<style jsx>
{`
.btnLoading{
background-color: green;
}
.oneSpan{
color: red;
font-size: 20px;
}
.twoSpan{
color: black;
font-size: 20px;
}
`}
</style>
</>
)
}
export default ButtonLoading;
}
export default ButtonLoading;