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 handle CSS unable to load resource error

    how to change the css of default select2 placeholder color?

    How do I add a shadow to an entire table using just CSS?

    How to ensure CSS :hover is applied to dynamically added element

    YUI Calendar: how does it load the Sam's Skin CSS?

    How do I check for a css value using jQuery?

    How do I make an image resize inside a div that is resizing to a percentage of a parent div?

    CSS selectors: how to make element hovering change wrapper's style

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    How to make beatiful select lists?

    How to hide table row overflow (take 2)

    How do I differentiate between two different images in the same class in my CSS file

    Meteor how to serve multiple css for different media types?

    How to override Inline Style CSS?

    How to fix the alignment of my sub-menu

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    jason lewis basset did not show icons well in laravel 4

    How can I extend the width of a child div to go beyond the parent div's width?

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How get dimension of HTML shadow element via JavaScript

    how to remove one canvas element from displaying on top of another canvas element

    How to add a play icon to Image on CSS

    Bootstrap - how to make the image being scaled down to fit the window height?

    How to make text on the same line different font without using extra divs?

    how to display euro symbol in css after and before pseudoelements

    How do I align three columns to the center using CSS?

    How can I push surrounding elements off screen when enlarging one?

    How to Center Logo in Responsive Header [closed]

    how to position a search bar in html/css