A progress bar can be used to show a user how far along he/she is in a process ( such as a download, file transfer, or installation).
Do you like this image? Check more images in the store.
In this tutorial, you’ll learn how to create a simple progress bar using JavaScript, and after that, we’ll add some CSS and jQuery to create an animated progress bar.
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
Output:
II. Bee Progress Bar
Now, when you know how the progress bar works we will do step ahead!
*animation opened in the Safari browser. *to see the live output of the animation click here.
To create the Bee Progress Bar follow the steps below:
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("bar");
var width = 10;
var id = setInterval(frame, 15);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
To see the live output of the animation go to lenastanley.com.
Do you like sketching? Did you know that you can sketch on Java Script canvas too?
*animation opened in the Safari browser. To see the live output of the animation click here.
What do you need to do?
To create the JavaScript sketch board you need to have the pencil cursor in .png/ SVG format (for practising you can use mine below) and follow the steps below:
Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1; If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.
var elDiceOne = document.getElementById('dice1');
var elDiceTwo = document.getElementById('dice2');
var elComeOut = document.getElementById('roll');
elComeOut.onclick = function () {rollDice();};
function rollDice() {
var diceOne = Math.floor((Math.random() * 6) + 1);
var diceTwo = Math.floor((Math.random() * 6) + 1);
console.log(diceOne + ' ' + diceTwo);
for (var i = 1; i <= 6; i++) {
elDiceOne.classList.remove('show-' + i);
if (diceOne === i) {
elDiceOne.classList.add('show-' + i);
}
}
for (var k = 1; k <= 6; k++) {
elDiceTwo.classList.remove('show-' + k);
if (diceTwo === k) {
elDiceTwo.classList.add('show-' + k);
}
}
setTimeout(rollDice(), 1000);
}
To see the live output of the animation go to lenastanley.com.
*animation opened in the Safari browser. To see the live output of the animation click here.
To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practise only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:
*animation opened in the Safari browser. To see the live output click here.
What do you need to do?
To create coin flip animation you will need two images of the coin (front and back) in .png format (to practise you can use these below) and follow the steps below:
Add HTML
Add CSS
Add CSS Animation
Add JavaScript
Step1.
Add HTML
<div id="coin"></div>
<div id="button">Toss a coin</div>
var text = document.getElementById('text');
var typewriter = new Typewriter(text, {
loop: true
});
typewriter.typeString('Hello!')
.pauseFor(2500)
.deleteAll()
.typeString('How are you today?')
.pauseFor(2500)
.deleteAll()
.typeString('Have a nice day :)')
.pauseFor(2500)
.start();
Note: Don’t forget to add the JS library to your code!
