11/04/23 - 18h
parent
cfa080f945
commit
df0be4dec4
|
@ -63,7 +63,6 @@ const TestUrl = (props) => {
|
|||
const elements = useElements();
|
||||
|
||||
const [message, setMessage] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const options = {
|
||||
// passing the client secret obtained from the server
|
||||
|
@ -224,6 +223,7 @@ const TestUrl = (props) => {
|
|||
const [phoneNumber, setphoneNumber] = useState("")
|
||||
|
||||
const { classId } = useParams();
|
||||
const [pokemon, setPokemon] = useState();
|
||||
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
|
@ -857,6 +857,25 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
|
|||
);
|
||||
}
|
||||
|
||||
const [isLoading, setLoading] = useState();
|
||||
|
||||
|
||||
function loading() {
|
||||
|
||||
setLoading(true);
|
||||
setTimeout(() => { // simulate a delay
|
||||
axios.get("https://pokeapi.co/api/v2/pokemon/1")
|
||||
.then((response) => {
|
||||
|
||||
// Get pokemon data
|
||||
setPokemon(response.data); //set pokemon state
|
||||
setLoading(false); //set loading state
|
||||
});
|
||||
}, 5000);
|
||||
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="test_page2">
|
||||
<Helmet>
|
||||
|
@ -873,8 +892,13 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
|
|||
<h2> cartouche formaion </h2>
|
||||
|
||||
|
||||
<button onClick={loading} id="finalise"> loading .....</button>
|
||||
<div>
|
||||
|
||||
{isLoading && <div className="loader-container">
|
||||
<div className="spinner"> loading in processsss</div>
|
||||
</div>}
|
||||
|
||||
|
||||
</div>
|
||||
<h2>payement strip</h2>
|
||||
|
|
|
@ -2,6 +2,33 @@
|
|||
.tox-statusbar__branding {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.loader-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 0.834);
|
||||
z-index: 1;
|
||||
top: 0px;
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width:20rem;
|
||||
height: 10rem;
|
||||
border: 8px solid;
|
||||
border-color: #3d5af1 transparent #3d5af1 transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin-anim 1.2s linear infinite;
|
||||
background-color: red;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue