Skip to content

Instantly share code, notes, and snippets.

@Mauryashubham

Mauryashubham/index.php

Last active August 3, 2017 09:46
Show Gist options
  • Save Mauryashubham/27ea20271a8487c4af96b1b4184f404b to your computer and use it in GitHub Desktop.
Save Mauryashubham/27ea20271a8487c4af96b1b4184f404b to your computer and use it in GitHub Desktop.
Download ZIP
Show Progress Bar After Registration Form Submission
Raw
index.php
/**
@author : Shubham Maurya,
Email id : [email protected]
**/
Hi all , Welcome to shubhammaurya.com , Today we are going to discuss ,
how to Show Progress Bar After Registration Form Submission
1.Make a file in notepad and save it as index.php and paste the below code.
<?php
echo "<script> window.onload = function() {move();}; </script>";
echo "<div style='width: 30%;background: white;box-shadow: 0 0 35px rgba(0,0,0, .1);border: 1px #4caf50;position: fixed;bottom: 0;z-index: 26;right: 0px;' >
<div id='myProgress'>
<div id='myBar'>1%</div>
</div>
<div><p id='myP' style='font-size: x-large;font-weight: normal;color: #229008;text-align: -webkit-center;padding: 30px;'><img src='Eclipse.gif'/ style='width: 15%;'></p>
</div>
</div>";
?>
<!DOCTYPE html>
<html>
<head>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 5px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById("myP").className = "w3-text-green w3-animate-opacity";
document.getElementById("myP").innerHTML = "Successfully Registered.";
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment