11/04/23 - 18h

recette2
cherif 2023-04-11 18:06:30 +02:00
parent cfa080f945
commit df0be4dec4
2 changed files with 79 additions and 28 deletions

View File

@ -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>

View File

@ -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) {