<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.loader{
border:20px solid #efefef;
width:100px ;
height:100px;
margin:0px auto;
border-top: 20px solid red;
border-radius:50%;
/* for safari */
-webkit-animation: spin 2s linear infinite ;
animation: spin 2s linear infinite;
}
/* for safari */
@-webkit-keyframes spin{
0%{
-webkit-transform: rotate(0deg) ;
}
100%{
-webkit-transform: rotate(360deg);
}
}
@keyframes spin{
0%{
transform: rotate(0deg) ;
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<h1 align="center">How to make a loader html/css</h1>
<div class="loader"></div>
</body>
</html>
Friday, March 29, 2019
How to show loader before a proccess in php/jquery/html/css
showloader.php
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
#content{
width:400px;
box-shadow:1px 1px 5px 1px #000;
margin:20px auto;
padding:5px;
}
.button{
padding:5px;
}
.loader{
border:10px solid #efefef;
border-top:10px solid red;
border-radius:50%;
width:30px;
height:30px;
margin:0px auto;
animation: spin 2s linear infinite;
}
@keyframes spin{
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
p{
padding:5px;
}
</style>
<body>
<div id="content">
<h1 align="center">How to show a loader</h1>
</div>
<p align="center"><button onclick="loadData()" class="button">Load More</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
function loadData(){
$("#content").append('<div class="loader" id="loader"></div>');
//this function send data to 2nd file
$.post("loaddata.php",
{
send: "yes"
},
//this function recieves data from 2nd file
function (data, status){
//if function success we'll hide the
//loader
$("#loader").remove();
$("#content").append('<p align="center"> Data showed from another file</p>') ;
}
);
}
</script>
</body>
</html>
loaddata.php
<?php
for($i = 0; $i<= 3333333; $i++){
//this is just to delay the
//execution time so we can
//see the loader
echo 'nothing';
}
?>
Subscribe to:
Posts (Atom)