Hi I have this working java script progress bar which shows progress bar as int.
I want to display the result of percentage as decimal?I have searched a lot in google and stack overflow didn't get what I want.
<html>
<head>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 10) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width *1 + '%'; //want this result as decimal
}
}
}
</script>
</body>
</html>
There you go, buddy. Change the JS as follows (and read the comments):
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 1); //change the setInterval from 10ms to 1ms, or whatever value you want to make it faster/slower
function frame() {
if (width >= 10) {
clearInterval(id);
} else {
width += 0.1; //change the increment value to 0.1 instead of 1
width = Math.round(width * 10) / 10; // round to nearest decimal
elem.style.width = width + '%';
elem.innerHTML = width + '%';
}
}
}
Related
I have a small question!
I'am trying to change css width property using JavaScript like this:
document.getElementById("progressvalue").style.width = "80%";
.progress {
width: 100%;
max-width: 500px;
border: 3px solid black;
height: 20px;
padding: 1px;
}
#progressvalue {
height: 100%;
width: 0%;
background-color: #05e35e;
}
<div class="progress">
<div id="progressvalue"></div>
</div>
But instead of 80% in JavaScript code, I want to increase the width value by 20%.
Like (width = width + 20%)
I want to apply this changing once (So I can use it mutiple times using other conditions), and this is why I need it like this (width = width + 20%)
You can try to read the element's style.width property, by keeping only the numeric part of it and adding it to your step (eg 20%).
const step = 5;
const updateProgress = () => {
const currentWidth = Number(document.getElementById("progressvalue").style.width.replace( "%", ""));
if (currentWidth>=100) {
return;
}
else {
document.getElementById("progressvalue").style.width = `${currentWidth+step}%`;
}
}
You can check this out in this CodePen.
I guess you want to do some animation right ? If so you can use recursivity with setTimeout:
function progress(val) {
val += 20;
document.getElementById("progressvalue").style.width = val + "%";
if (val < 100) // To stop the loop when progress bar is full
setTimeout(function () {
progress(val);
}, 1000)
}
progress(0); // Start the animation
This will increase by 20% every 0.5 seconds.
let percent = 0;
setInterval(() =>
{
if(percent > 100) {
clearInterval();
return;
}
document.getElementById("progressvalue").style.width = percent + "%";
percent += 20;
}, 500);
You can use this:
var el = document.getElementById("progressvalue");
var elementWidth = el.style.width;
var newWidth = `${20+parseInt(elementWidth.substring(0, elementWidth.length-1))}%`
el.style.width=newWidth;
Assuming that you have set the width of the element initially to a percent value.
<button type="button" id="myBtn" onclick="myFunction()">Change the width</button>
<script>
function myFunction() {
let progress = document.getElementById("progressvalue");
let style = window.getComputedStyle(progress, null).getPropertyValue('width');
let currentSize = parseFloat(style);
progress.style.width = (currentSize + 20) + '%';
}
</script>
You can try it
//offsetWidth : returns the width of the element
var element_width=document.getElementById("progressvalue").offsetWidth
document.getElementById("progressvalue").style.width =element_width + (20*element_width/100) +'px' ;
You need to get the current width of <div id="progressvalue"></div>, put it in a variable and add 20 and reassign that value to <div id="progressvalue"></div>.
I have a live progress bar in javascript, but I need to use it multiple places.I am using it just for loader. Since I am using the same progress bar in multiple places, I need it to come back automatically its original position(20%) once it complete 100%. Here is the code below
HTML/JAVASCRIPT
<!DOCTYPE html>
<html>
<body>
<style>
#myProgress {
width: 20rem;
background-color: #ddd;
}
#myBar {
height: 15px;
background-color: #04AA6D;
text-align: center;
line-height: 14px;
color: white;
border-radius: 5px;
font-size: 10px;
}
</style>
<div class="mt-1">Uploading Document....</div>
<div id="myProgress" class="mt-2">
<div id="myBar"></div>
</div>
<div>
<button onclick="myFunction()">Button1</button>
<button onclick="myFunction2()">Button2</button>
</div>
<script>
function myFunction() {
const elem = document.getElementById('myBar');
let width = 20;
const id = setInterval(frame, 40);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
if(elem != null){
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
}
function myFunction2() {
const elem = document.getElementById('myBar');
let width = 20;
const id = setInterval(frame, 40);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
if(elem != null){
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
}
</script>
</body>
</html>
You could add a timeout function in your if width >=100 and set everything back to 20%.
function frame() {
if (width == 100) {
clearInterval(id);
setTimeout(()=>{
elem.style.width = "20%";
elem.innerHTML = '20%';
}, 500)
} else {
width++;
if(elem != null){
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
I am new to programming but trying to solve a problem.
I am trying to increase a progress bar as I press on the "d" button. I am trying to do it recursively but I don't have enough skills to do it properly. Any help would be greately appreciated.
My js file looks like this so far:
window.addEventListener('keypress', function(e) {
function counter(p) {
//if the button is "d"
if (e.keyCode === 100) {
//target progressbar width and increase it
$('#progressbar').css('width', function(index, value) {
return $("#progressbar").css('width', ((p * 2) + "%"));
});
if ($('#progressbar').width() < 100) {
return counti(p + 1)
}
}
};
counti(1);
});
My html:
<div id = "myProgress" >
<div id = "progressbar" > 0 / 50 </div>
</div>
var count = 0;
var maxCount = 50;
var progressBar = document.getElementById("progressbar")
window.addEventListener("keypress", function(e) {
//if the button is "d"
if (e.keyCode === 100) {
// increase count if it's less than maxCount
count = count === maxCount ? maxCount : count + 1;
//target progressbar width and increase it
var newWidth = (count / maxCount) * 100 + "%";
progressBar.style.width = newWidth;
progressBar.innerHTML = count + "/" + maxCount
}
});
#myProgress {
width: 400px;
height: 30px;
background-color: #e4e4e4;
}
#progressbar {
width: 0%;
height: 30px;
background-color: #5980a7;
color: #fff;
}
<div id="myProgress">
<div id="progressbar">0/50</div>
</div>
So this is my first code snippet that I wrote for fun as part of an exercise. I created a 300 × 300 px box where two corners have their border-radius increased and decreased to create a breathing animation. After a couple of minutes, the animations seem to speed up and flutter.
Does anyone have any idea how to improve the code?
function frame() {
var elem = document.getElementById('box1');
var radius = 0;
var id1 = setInterval(frame1, 20);
var id2 = setInterval(frame2, 20);
function frame1() {
if (radius == 300) {
clearInterval(id1);
setInterval(frame2, 20);
} else {
clearInterval(id2);
radius ++;
elem.style.borderTopRightRadius = radius + 'px';
elem.style.borderBottomLeftRadius = radius + 'px';
}
return radius;
}
function frame2() {
if (radius == 0) {
clearInterval(id2);
setInterval(frame1, 20);
} else {
clearInterval(id1);
radius --;
elem.style.borderTopRightRadius = radius + 'px';
elem.style.borderBottomLeftRadius = radius + 'px';
}
return radius;
}
}
frame()
Using requestAnimationFrame and basing the animation on elapsed time, and some dirty maths
var elem = document.getElementById("box1");
var radius = 0;
var begin;
function frame(v) {
if(begin === undefined) {
begin = v;
}
let radius = Math.abs((300 + (v - begin) / 20) % 600 - 300);
elem.style.borderTopRightRadius = radius + "px";
elem.style.borderBottomLeftRadius = radius + "px";
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
#box1 {
width:500px;
height:500px;
background:dodgerblue;
}
<div id="box1">
</div>
But CSS animation is probably better for such a simple animation
#box1 {
width:500px;
height:500px;
background:dodgerblue;
}
#box1 {
animation:breath 6s infinite linear alternate;
}
#keyframes breath {
from { border-radius: 0 0 0 0; }
to { border-radius: 0 300px 0 300px; }
}
<div id="box1">
</div>
Here's the above two methods, side by side
var elem = document.getElementById("box1");
var radius = 0;
var begin;
var maxRadius = 100;
var x = 60;
function frame(v) {
if(begin === undefined) {
begin = v;
}
let radius = Math.abs((maxRadius + (v - begin) / x) % (maxRadius *2) - maxRadius);
elem.style.borderTopRightRadius = radius + "px";
elem.style.borderBottomLeftRadius = radius + "px";
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
#box1 {
width:200px;
height:200px;
background:dodgerblue;
display:inline-block;
margin-right:20px;
}
#box2 {
width:200px;
height:200px;
background:dodgerblue;
display:inline-block;
}
#box2 {
animation:breath 6s infinite linear alternate;
}
#keyframes breath {
from { border-radius: 0 0 0 0; }
to { border-radius: 0 50% 0 50%; }
}
<div id="box1">
</div>
<div id="box2">
</div>
Both methods should be immune to any timing issues due to tab being in background etc
i have a progress bar which has to finish at 100%, and this moment the number shows this progress, the problem is this number is 1.5(it has to show 0.1, 0,2 and so on till number - 1.5) and I don't know how bind the progress bar with this number
$(function() {
var x = document.getElementById("load");
var width = 0;
x.innerHTML = width;
var int = setInterval(move, 20);
function move() {
if (width == 100) {
clearInterval(int);
} else {
width += 1;
x.style.width = width + "%";
x.innerHTML = width + "%";
}
}
});
Do width/100 and use toFixed() to determine the number of decimals.
$(function() {
var x = document.getElementById("load");
var width = 0;
x.innerHTML = width;
var int = setInterval(move, 20);
function move() {
if (width == 100) {
clearInterval(int);
} else {
width += 1;
x.style.width = width + "%";
x.innerHTML = ((width / 100).toFixed(1)) + "%";
}
}
});
#load {
position: fixed;
height: 100%;
display: flex;
align-items: center;
background-color: #000;
color: #fff;
font-size: 50px;
justify-content: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load" />
This is more a math problem than a scripting one...
You have to tell the script that 1.5 is 100%.
I only added one line to your script in order to change the inner HTML displayed.
var showNumber = (1.5/100)*width;
x.innerHTML = showNumber.toFixed(1);
$(function() {
var x = document.getElementById("load");
var width = 0;
x.innerHTML = width;
var int = setInterval(move, 200); // Setted a longer delay...
function move() {
if (width == 100) {
clearInterval(int);
} else {
width += 1;
x.style.width = width + "%";
var showNumber = (1.5/100)*width;
x.innerHTML = showNumber.toFixed(1); // Only one decimal.
}
}
});
#load{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load"></div>