Skip to main content

Arcadis is Hiring!!!

 ARCADIS IS HIRING!!! Company : Arcadia Position : Software Engineer Experience : Bs/Ms Degree : BS in CS Apply Link: Apply Here
Post a Comment

Create ur own Dynamic Progress Bar using JS

    

Frist of all let understand. what is progress bar?

 The progress bar uses basic markup. There is: a container with computed classes     based on the current step: progressClasses. a static background track:     progress_bg. a loop that iterates through each step and applies stepClasses based  on the current step.

You will get Preview something like this:



Lets Have a look on code:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
  *{
    font-family: 'Maven Pro', sans-serif;
  }

  #myprogress{
    width: 80%;
    background: grey;
    margin: auto;
  }

  #mybar{
    width: 1%;
    background: green;
    color: white;
    text-align: center;
  }

</style>

<body>
  <h1 style="text-align: center;"><i class="fa fa-music" aria-hidden="true"></i>Progress Bar using JavaScript <i class="fa fa-music" aria-hidden="true"></i> </h1>
  

  <div id="myprogress">
      <div id="mybar">
        <span id="incvalue">1%</span>
      </div>
  </div>

  <br> <button onclick="move()">ClickMe</button>

<script>
  const move = () => {
    var elem = document.getElementById("mybar");
    var width = 1;
    var id = setInterval(frame, 10)

    function frame(){
      if(width >= 100){
        clearInterval(id);
      }else{
        width++;
        elem.style.width = width + "%";
        document.getElementById("incvalue").innerHTML = width + "%";
      }
    }
  }

</script>

</body>
</html>

 

Output:




Labels:

Comments

Post a Comment

Popular posts from this blog

Let's Start with the Internet Marketing | Affiliate Marketing

Digital Marketing is  that the act of promoting and mercantilism merchandise and services by leverage online selling ways like social media selling, search selling, and email marketing. At a high level, digital marketing refers to advertising delivered through digital channels like search engines, websites, social media, email, and mobile apps. Using these online media channels, digital marketing is that the method by which companies endorse goods, services, and brands. Consumers heavily depend upon digital means to research products. as an example, Think with Google marketing insights found that 48% of consumers start their inquiries on search engines, while 33% look to brand websites and 26% search within mobile applications. While modern-day digital marketing is an unlimited system of channels to which marketers simply must onboard their brands, advertising online is way more complex than the channels alone....
Post a Comment
Read more

Hewlett Packard Enterprise

CMS INTERN JOB   At Hewlett Packard Enterprise, we bring together the brightest minds to create breakthrough technology solutions that advance the way people live and work. What sets us apart? Our people and our relentless dedication to helping our customers make their mark on the world. We are a team of doers, dreamers and visionaries; inspired by our purpose and driven by our strategy. We live by our three values: partner, innovate and act. Our legacy inspires us as we forge ahead, always pushing to discover what’s next. Every day is a new opportunity to advance and grow ourselves, our company and the industry. Some people call it an obsession, we call it a way of life. SOME INFORMATIONS AND BASIC REQUIREMENTS REGARDING THE JOB: Job ID: 1104914 Date Posted: 10/26/2021 Primary Location: Bangalore, Karnataka Other Locations: Bangalore, Karnataka, India,Chennai,TAMILNADU, India Job Category: Graduate Program and Internships Schedule: Full time Shift: No shift premium (India) Respons...
Post a Comment
Read more