Reputation: 53

How to create a progress bar animation

so I want to create a simple animated progress bar for a password input, the problem that I currently have is that I don' know how to implement animation into my code... I don't know jquery yet so I have to use CSS/JS/HTML5. I appreciate your help, thanks!

	var password = document.getElementById('input');
	var feedback = document.getElementById('output');
	var progress = document.getElementById('progress');

function checkLength() {
	var passwordValue = password.value;
	if (passwordValue.length === 0) {
		feedback.textContent = 'to short!';
		progress.value = 0;
	} else if (passwordValue.length === 1) {
		feedback.textContent = 'Poor';
		progress.value = 5;
	} else if (passwordValue.length === 2) {
		feedback.textContent = 'Poor';
		progress.value = 10;
	} else if (passwordValue.length === 3) {
		feedback.textContent = 'Poor';
		progress.value = 20;
	} else if (passwordValue.length === 4) {
		feedback.textContent = 'Better';
		progress.value = 30;
	} else if (passwordValue.length === 5) {
		feedback.textContent = 'Better';
		progress.value = 40;
	} else if (passwordValue.length === 6) {
		feedback.textContent = 'Good';
		progress.value = 50;
	} else if (passwordValue.length === 7) {
		feedback.textContent = 'Good';
		progress.value = 60;
	} else if (passwordValue.length === 8) {
		feedback.textContent = 'Really Good';
		progress.value = 70;
	} else if (passwordValue.length === 9) {
		feedback.textContent = 'Perfect';
		progress.value = 80;
	} else if (passwordValue.length >= 10) {
		feedback.textContent = 'Golden';
		progress.value = 100;
	}

}
	password.addEventListener('keyup', checkLength, false);

* {
	margin: auto;
	color: #000;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
}
#content {
	min-height: 990px;
}
input {
	margin-top: 30px;
	background-color: white;
}
#progress {
	width: 500px;
	box-shadow: 0px 18px 20px black;
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	border: none;
	background-color: #6F8D96
}
#progress::-webkit-progress-bar {
	background-color: #6F8D96;
	opacity: 0.7;
}
#progress::-webkit-progress-value {
	background-color: red;
}

#progress::-moz-progress-bar {
	background-color: red;
	opacity: 0.7;
}

#output {
	color: #fff;
}

<!DOCTYPE html>
<html>
    <head>
        <title>passwordChecker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="cssjs/passwordChecker.css">
    </head>
    <body>
        <div id="bgimage">
            <div id="content">
                <div id="topimage"></div>
                <h1>enter ur password</h1>     
                <input id="input" type="password" placeholder="let's see...">
                <br><br>
                <progress class='' id='progress' value="0" max="100"></progress>
                <div id="output">Ready</div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Answers (3)

brk

Reputation: 50291

This may not be answer to your question, also I am not sure if it is possible to animate the progress using progress tag.But surely it is possible to create & animate the progress bar using div & span,probably which you dont want to use. Also I see in one of your comment that you want to learn new,So I modified your the js .

var password,feedback;progress ="";
 function _checkLength(){
            var passwordValue = password.value.length;
            switch(passwordValue){
           case 0: _updateProgressBar("too short!",0);
           break;
           case 1: _updateProgressBar("Poor",5);
           break;
           case 2: _updateProgressBar("Poor",10);
           break;
           case 3: _updateProgressBar("Poor",20);
           break;
           case 4: _updateProgressBar("Better",30);
           break;
           case 5: _updateProgressBar("Better",40);
           break;
           case 6: _updateProgressBar("Good",60);
           break;
           case 7: _updateProgressBar("Good",70);
           break;
           case 8: _updateProgressBar("Really Good",80);
           break;
           case 9: _updateProgressBar("Perfect",90);
           break;
           case 10: _updateProgressBar("Golden",100);
           break;
          } 
        }
function _updateProgressBar(textContent,value){
     feedback.textContent =textContent;
        progress.value = value;
}


// This will through an Uncaught TypeError:Cannot read property "addEventListener" of null if this snippet is inside head tag. You can put this script inside body tag
    // password.addEventListener('keyup', _checkLength, false);

    // Else you can use DOMContentLoaded event to addEventListener to element

    document.addEventListener("DOMContentLoaded",function(event){
        password = document.getElementById('input');
        feedback = document.getElementById('output');
        progress = document.getElementById('progress');
        password.addEventListener('keyup', _checkLength, false);
        })

Here is a JSFIDDLE

Upvotes: 0

user5589903

Reputation:

This css classes should have

a div with display block, one more div on top, and change the width of the

div so it feels like a progress bar, add css3 animation that will animate

on width change

document.querySelector('.loading-bar').style.width = width + 'px';

.loading-container {
  width: 400px;
  height: 80px;
  background-color: yellow;
 }

.loading-bar {
   width: 0; // this should be incremented
   height: 80px;
   background-color: green;
   will-change: width;
   transition: width 200ms ease in;
 }

Upvotes: 3

Stefano Cerelli

Reputation: 31

I suggest you to avoid

#progress::-webkit-progress-bar

And simply use two div like this:

<div class="progress-wrapper">
 <div class="progress-wrapper__over"></div>
</div>

with a style that can be something like this:

.progress-wrapper{
 width: 200px;
 height: 40px;
 background-color: grey;
}
.progress-wrapper__over {
 width: 0;
 height: 40px;
 background-color: red;
 will-change: width;
 transition: width 100ms ease;
}

and then on input change simply change the width of progress-wrapper__over

A tip instead of use 3000 if just use a switch :) and afterall i suggest to avoid javascript animation for any kind of situation that you can handle by using css.

Upvotes: 1

How to create a progress bar animation

Answers (3)

Related Questions