Hello World!,
This Hello World! will remind you something, What is it ? #Hahaha, This will remind you about your first program of your life. It sounds great, Lets make your programming journey full of adventures with JavaScript
In this post you will learn How to create a Progress Bar using JavaScript ?
What is Progress Bar ?
Progress Bar is used to illustrate the progress of any kind of tasks like downloading progress, Installing progress, Uploading progress etc. Progress Bar will illustrate it graphically, It is also used to show the progress status like Download, Upload, Installation etc's status.
If you want to create a simple Progress Bar for your website, This post will help you to create a Progress Bar using JavaScript.
So Let's start
Follow the given steps for creating a Progress Bar, First of all you have to create a HTML page, This HTML page is a structure of your Progress Bar :
HTML :
CSS :
JavaScript :
This Hello World! will remind you something, What is it ? #Hahaha, This will remind you about your first program of your life. It sounds great, Lets make your programming journey full of adventures with JavaScript
Progress Bar is used to illustrate the progress of any kind of tasks like downloading progress, Installing progress, Uploading progress etc. Progress Bar will illustrate it graphically, It is also used to show the progress status like Download, Upload, Installation etc's status.
If you want to create a simple Progress Bar for your website, This post will help you to create a Progress Bar using JavaScript.
So Let's start
Follow the given steps for creating a Progress Bar, First of all you have to create a HTML page, This HTML page is a structure of your Progress Bar :
HTML :
<div id="Progress_Bar_Status">
<div id="Progress"></div>
</div>
NOTE : The html contains two div class called "Progress_Bar_Status" and "Progress_Bar",<div id="Progress"></div>
</div>
CSS :
<style>
#Progress_Bar_Status{
width: 70%;
background-color: #ddd;
}
#Progress{
width: 1%;
height: 40px;
background-color: blue;
text-align: center;
line-height: 45px;
}
</style>
NOTE : Here we add CSS for our Progress bar using css id.#Progress_Bar_Status{
width: 70%;
background-color: #ddd;
}
#Progress{
width: 1%;
height: 40px;
background-color: blue;
text-align: center;
line-height: 45px;
}
</style>
JavaScript :
<script>
function status(){
var element = document.getElementById("Progress");
var width = 1;
var identity = setInterval(scene, 10);
function scene(){
if(width >= 100){
clearInterval(identity);
} else{
width++;
element.style.width = width + % ;
}
}
}
</script>
function status(){
var element = document.getElementById("Progress");
var width = 1;
var identity = setInterval(scene, 10);
function scene(){
if(width >= 100){
clearInterval(identity);
} else{
width++;
element.style.width = width + % ;
}
}
}
</script>
Complete Code :
<!DOCTYPE html>
<html>
<head>
<style>
#Progress_Bar_Status{
width: 49%;
background-color: #ddd;
}
#Progress{
width: 2%;
height: 23px;
background-color: blue;
}
</style>
</head>
<body>
<h4>Your Progress Bar is now ready to use @HappyCodding</h4>
<h2>Downloading Status</h2>
<div id="Progress_Bar_Status">
<div id="Progress"></div>
</div>
var element = document.getElementById("Progress");
var width = 1;
var identity = setInterval(scene, 10);
function scene(){
if(width >= 100){
clearInterval(identity);
} else{
width++;
element.style.width = width + '%' ;
}
}
}
</script>
</body>
</html>
<html>
<head>
<style>
#Progress_Bar_Status{
width: 49%;
background-color: #ddd;
}
#Progress{
width: 2%;
height: 23px;
background-color: blue;
}
</style>
</head>
<body>
<h4>Your Progress Bar is now ready to use @HappyCodding</h4>
<h2>Downloading Status</h2>
<div id="Progress_Bar_Status">
<div id="Progress"></div>
</div>
<br>
<button onclick="status()">Start Downloading</button>
<script>
function status(){var element = document.getElementById("Progress");
var width = 1;
var identity = setInterval(scene, 10);
function scene(){
if(width >= 100){
clearInterval(identity);
} else{
width++;
element.style.width = width + '%' ;
}
}
}
</script>
</body>
</html>
Now your Progress Bar is ready, But you can make better than this Progress Bar by using your creativity, You can put your creative brain with your programming skill to make a better progress bar.
Percentage ( % ) Progress Bar :
You can create a another type of progress bar that is percentage progress bar, This progress bar will show you the progress status in the from of percentage,Let's see
Code :
<!DOCTYPE html>
<html>
<head>
<style>
#Progress_Bar_Status{
width: 49%;
background-color: #ddd;
}
#Progress{
width: 1%;
height: 35px;
background-color: blue;
text-align: center;
line-height: 33px;
color: black;
}
</style>
</head>
<body>
<h4>Your Progress Bar is now ready to use @HappyCodding</h4>
<h2>Downloading Status</h2>
<div id="Progress_Bar_Status">
<div id="Progress">1%</div>
</div>
var element = document.getElementById("Progress");
var width = 1;
var identity = setInterval(scene, 10);
function scene(){
if(width >= 100){
clearInterval(identity);
} else{
width++;
element.style.width = width + '%' ;
element.innerHTML = width * 1 + '%' ;
}
}
}
</script>
</body>
</html>
<html>
<head>
<style>
#Progress_Bar_Status{
width: 49%;
background-color: #ddd;
}
#Progress{
width: 1%;
height: 35px;
background-color: blue;
text-align: center;
line-height: 33px;
color: black;
}
</style>
</head>
<body>
<h4>Your Progress Bar is now ready to use @HappyCodding</h4>
<h2>Downloading Status</h2>
<div id="Progress_Bar_Status">
<div id="Progress">1%</div>
</div>
<br>
<button onclick="status()">Start Downloading</button>
<script>
function status(){var element = document.getElementById("Progress");
var width = 1;
var identity = setInterval(scene, 10);
function scene(){
if(width >= 100){
clearInterval(identity);
} else{
width++;
element.style.width = width + '%' ;
element.innerHTML = width * 1 + '%' ;
}
}
}
</script>
</body>
</html>
Nice I really liked it
ReplyDeleteAwesome post it works .Thanks
ReplyDeleteThat's what I m looking for simple, small, perfect code thanks for sharing thanks a lot
ReplyDeletenice bro this post is beautiful information give to us.
ReplyDelete