Tengo un load animado que se muestra al cargar una página.
En HTML funciona bien pero en PHP no funciona. Dejo el código del load animado.
$(window).on('load', function () {
setTimeout(function () {
$(".loader-page").css({visibility:"hidden",opacity:"0"})
}, 1000);
});
body{
font-family: 'Segoe UI Light';
background-color: orange;
}
h3, label, h2, h1{
color: white;
}
input{
width: 10%;
border-style: none;
border-radius: 5px;
}
.loader-page {
position: fixed;
z-index: 250;
background: rgba(0,0,0,0.9);
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition:all 2s ease;
}
.loader-page::before {
content: "";
position: absolute;
border: 2px solid rgba(250, 250, 250,1);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(250, 0, 0,0.1);
border-top: 2px solid rgba(250, 0, 0,0.1);
animation: rotarload 1s linear infinite;
transform: rotate(0deg);
}
@keyframes rotarload {
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
}
.loader-page::after {
content: "";
position: absolute;
border: 2px solid rgba(250, 250, 250, 0.3);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
animation: rotarload 1s ease-out infinite;
transform: rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader-page"></div>
<body>
<center>
<h2>CALCULADORA</h2>
<h3>Tus datos</h3>
<input type="number" readonly="readonly" value="23">
<label style="font-weight: 700; font-size: 14pt;">/</label>
<input type="number" readonly="readonly" value="0">
<h1>No puedes dividir por 0</h1>
</center>
</body>
Tengo esto mismo en una página en PHP, todo igual, los estilos, la función en JQuery y la clase, pero no muestra el loader.
En PHP este es mi código:
<?php
$number = $_POST["number"];
$numero = $_POST["numero"];
$result = "";
if($numero == 0){
echo "NO PUEDES DIVIDIR POR 0";
return header("Location: index.html");
}else{
$result = round($number/$numero,2);
}
?>
<html>
<head class="loader-page">
<title>Calculadora</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="calculator.ico" />
<style type="text/css">
/*_LOAD ANIMADO_*/
.loader-page {
position: fixed;
z-index: 25000;
background: rgba(0, 0, 0, 0.6);
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition:all .3s ease;
}
.loader-page::before {
content: "";
position: absolute;
border: 2px solid rgba(250, 0, 0,1);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(250, 0, 0,0.1);
border-top: 2px solid rgba(250, 0, 0,0.1);
animation: rotarload 1s linear infinite;
transform: rotate(0deg);
}
@keyframes rotarload {
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
}
.loader-page::after {
content: "";
position: absolute;
border: 2px solid rgba(250, 0, 0, 0.3);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
animation: rotarload 1s ease-out infinite;
transform: rotate(0deg);
}
/*_FIN_*/
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="user-select: none !important;" oncontextmenu="return false;">
<h1>Calculadora</h1>
<br>
<center>
<div class="forms">
<label class="labels">Primer Numero</label>
<input type="text" class="textbox_1" disabled="disabled" value="<?php echo($number)?>">
<br><br>
<label class="labels">Segundo Numero</label>
<input type="text" class="textbox_2" disabled="disabled" value="<?php echo($numero)?>">
<br><br>
<label class="labels">Resultado</label>
<input type="text" class="textbox_3" disabled="disabled" value="<?php echo($result)?>">
<br><br>
<input type="button" value="VOLVER CALCULAR" class="calc" onclick="return window.location.href ='index.html' ">
</div>
</center>
<script type="text/javascript">
$(window).on('load', function () {
setTimeout(function () {
$(".loader-page").css({visibility:"hidden",opacity:"0"})
}, 1000);
});
</script>
</body>
</html>
<head>
prueba metiéndolo en<body>
( head no es visible )