Skip to main content

How To add JavaScript Progress Bar in website

<!DOCTYPE html>
<html>
<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 10%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">
    <div id="label">10%</div>
  </div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>
Source - http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js
progress bar

JavaScript Progress Bar

10%

Popular posts from this blog

পি এইচ পি কি? এর প্রয়োজনীয়তা !!!!!

পি এইচ পি কি?
পি এইচ পি (PHP) কে বলা হয় হাইপারটেক্সট প্রিপ্রসেসর (Hypertext Preprocessor) । পি এইচ পি একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ। ইহা সার্ভার সাইড স্ক্রিপ্টিং ল্যাঙ্গুয়েজ হিসেবেও অধিক পরিচিত। ডাইনামিক এবং ইন্ট্রাকটিভ ওয়েব সাইট তৈরির ক্ষেত্রে পি এইচ পি একটা শক্তিশালি ল্যাঙ্গুয়েজ। ইহা ওপেন সোর্স জেনারেল পারপোজ স্ক্রিপ্টিং ল্যঙ্গুয়েজ হওয়ায় ওয়েব প্রোগ্রামারদের কাছে অধিক জনপ্রিয়। এছাড়া পি এইচপি ওয়েবে তথ্য সংরক্ষণের ক্ষেত্রে সর্বোচ্চ নিরাপত্তা প্রদান করে। পি এইচ পি কে এইচ টি এম এল (HTML) এর সাথেও ব্যবহার করা যায়। ওয়ার্ডপ্রেস জুমলা সহ বেশ কিছু এডভান্সড ওপেনসোর্স কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) পি এইচ পি দ্বারা তৈরি। পি এইচ পি ব্যবহার করে কাস্টম কনটেন্ট ম্যানেজমেন্ট সিস্টেম তৈরি করা যায়। এছাড়া ই-কমার্স, ম্যানেজমেন্ট, অনলাইন ব্যাংকিং সফটওয়্যার ইত্যাদি তৈরিতেও পি এইচ পি ব্যাপকভাবে ব্যবহুত হচ্ছে।  বাংলায় কম্পিউটার শিখতে চান তো ... এখানে ক্লিক করুন .....

পি এইচ পি কেন প্রয়োজন? (Why PHP is required?)এইচ টি এম এল (HTML) এবং সি এস এস (CSS) ব্যবহার করে স…

Mail To Contact Form For your Website & Blogger With Code

Project -Mail To Contact Form For your Website & Blogger With Code.
<html>
<head>
<title>Html Contact Form</title>
</head>
<h1>Contact Form Poject</h1>
<form name="htmlform" method="post" action="mailto:malinsarkar@yahoo.in"enctype="text/plain">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="…

Show Today's Date & Current Time As Simple Text On Your Blog

Here’s a simple JavaScript to show the current date anywhere in the blog. You can place this code either in any HTML/JavaScript widget, or anywhere else in the template as per you wish. The output will be like this:
Today is Wednesday, August 2.
And the required code, to be added is this:

<script language=”Javascript”>
<!–
var dayName = new Array (“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”)
var monName = new Array (“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”)
var now = new Date
document.write(“Today is ” + dayName[now.getDay()] + “, ” + monName[now.getMonth()] + ” “+now.getDate() +”.”)
//–>
</script> There’s an even simpler code, to display date(like this):
2/7/117
Here’s the code for that:
<script language=”Javascript”>
<!–
var now = new Date
document.write(now.getDate() + “/” + now.getMonth() + “/” + now.getYear())
//–>
</script>