How to create a progress bar animation

Tags: javascript,html,css,html5

Problem :

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

Solution :

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;

    CSS Howto..

    How to remove the “Dotted Border” on clicking?

    how to make an image “coming” to foreground

    How to use html entities in CSS content property?

    How to animate to position fixed?

    How do I combine two columns with different formatting?

    How can I display social media icons in a horizontal line instead of vertical row

    Div / CSS / ZIndex - how to overlap pictures?

    How to Add external Javascript and CSS for CakePhp

    how to remove margin or padding of window in javascript/css?

    how do i css position this divs according to my layout picture?

    How to position the element using absolute position?

    How to Toggle Switch - Prices and Config? [closed]

    How to implement fade-in and other effects using CSS

    How to create a “dot-dash” border with css or javascript?

    How to display text on the same line?

    How to set ASP dropdownlist to read only with css or javascript?

    How to override a CSS class within a content div

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to fold/unfold a DIV like on this website

    How do I create a pattern overlay in CSS

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to make sure Text always stays on top of Image (even when resizing)?

    how to make css :after / :before content clickable on a label element [duplicate]

    how to change some css Properties according to text length

    How to use an image more than one place in CSS

    How to achieve this button-border effect with CSS? (image included)

    Google App Engine: how to use the internal CSS in the template?

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How do you use nth-child(odd) on table rows but you want some rows to be exempted from the css rule?