Skip to main content
Formateo del código
Origen Enlace

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;

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;

Componente LoadingButton:

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;

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;

Componente LoadingButton:

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;
se eliminaron 26 caracteres en el cuerpo
Origen Enlace
Angel
  • 151
  • 8

Estoy haciendo un botón de hilandero de carga(loading spinner), cuando oprimo el botón aparece el icono de carga pero no desaparece al tiempo marcado, y sigue con la carga. Aquí les dejo el código:

Componente Loader:Componente 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;

Componente LoadingButton:Componente LoadingButton:

import React, {useState} from 'react';

import React, {useState} from 'react';

import Loader from '../components/loader'

function ButtonLoading(){ const [loading, setLoading] = useState(false)

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;

Estoy haciendo un botón de hilandero de carga(loading spinner), cuando oprimo el botón aparece el icono de carga pero no desaparece al tiempo marcado, y sigue con la carga. Aquí les dejo el código:

Componente 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;

Componente LoadingButton:

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;

Estoy haciendo un botón de hilandero de carga(loading spinner), cuando oprimo el botón aparece el icono de carga pero no desaparece al tiempo marcado, y sigue con la carga. Aquí les dejo el código:

Componente 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;

Componente LoadingButton:

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;

Origen Enlace
Angel
  • 151
  • 8

Button Loading react-hooks-nextjs

Estoy haciendo un botón de hilandero de carga(loading spinner), cuando oprimo el botón aparece el icono de carga pero no desaparece al tiempo marcado, y sigue con la carga. Aquí les dejo el código:

Componente 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;

Componente LoadingButton:

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;