I've searched so much but I can't figure it out how to configure my bars.
I plan to put 3 loading bars that execute automatically according time:
1st will start from 30 to 60 seconds
2nd from 300 to 1800 seconds
3rd from 1801 to 1860 seconds
My Code is this ( be aware that I don't know how to change this values, I tried but don't work properly... This is the help I need, the frame stuff )
var my1Bar = setTimeout(start1Bar, 30000);
var my2Bar = setTimeout(start2Bar, 300000);
var my3Bar = setTimeout(start3Bar, 1800000);
function start1Bar() {
var elem = document.getElementById("my1Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function start2Bar() {
var elem = document.getElementById("my2Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function start3Bar() {
var elem = document.getElementById("my3Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
Thank you all
startBar(3000,4000 ,"my1Bar");
startBar(4001,20000 ,"my2Bar");
startBar(20001,22000,"my3Bar");
function startBar(start_ms,end_ms,id){
return setTimeout(function(){
loadBar(start_ms,end_ms,id);
}, start_ms);
}
function loadBar(start_ms,end_ms,id){
var elem = document.getElementById(id);
var widthAtStart = 0;
var widthAtEnd = 100;
var timeDuration=end_ms-start_ms;
var remindWidth=widthAtEnd-widthAtStart;
var curWidth=widthAtStart;
var lastTime=Date.now();
var intervalId = setInterval(frame, 10);
function frame() {
var dt=Date.now()-lastTime;
lastTime=Date.now();
var w=remindWidth*dt/timeDuration;
if (curWidth >= widthAtEnd) {
clearInterval(intervalId);
elem.style.width = '100%';
} else {
curWidth+=w;
elem.style.width = curWidth + '%';
}
}
}
.bars>div{
position:relative;
width:100%;
height:22px;
padding:1px;
margin:2px;
background:#ccc;
}
.bars>div>div{
position:absolute;
height:20px;
width:0;
background:red
}
<div class="bars">
<div><div id="my1Bar"></div></div>
<div><div id="my2Bar"></div></div>
<div><div id="my3Bar"></div></div>
</div>
Here is a bit refactored version of your code. To run a progress bar you need to call startBar() function with the time you want it to start and end and the id of a progress bar element. For example, in the code below the first bar will start after 1 second and end after 6 seconds (running for 5 seconds in total).
I also used HTML5 progress element. It is much better than using divs as progress is semantic and you don't have to manipulate any css parameters, you just change it's value. Plus it has a bonus of looking native to the platform and browser it is rendered on. However, if you want to style it to look the same on all platforms, it can be a bit of a pain. Here is a styling guide for progress element
startBar(1, 6, "first");
startBar(3, 6, "second");
startBar(5, 8, "third");
function startBar(from, to, id) {
// Convert seconds to miliseconds
from *= 1000;
to *= 1000;
// Delay the start of the loop for 'from' seconds
setTimeout(function() {
var bar = document.getElementById(id);
var duration = to - from;
var start = Date.now();
// Start the loop
var loop = setInterval(function() {
var runningFor = Date.now() - start;
if (runningFor <= duration) {
bar.value = Math.ceil(runningFor / duration * 100);
} else {
bar.value = 100;
clearInterval(loop);
}
}, 10);
}, from);
}
progress {
width: 100%;
}
<progress id="first" value="0" max="100"></progress>
<progress id="second" value="0" max="100"></progress>
<progress id="third" value="0" max="100"></progress>
Related
I have a one-page website with a section for a progress bar. I have a function for animation and all that, and I know how to start it when the page loads. But I don't know how to start it when I scroll to that section.
JS code :
window.onload = function() {
move();
};
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 95) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
If you want to trigger on scroll, you could do that through jquery.
$(element).scroll(() ={
function ()
}
But if you want to animate on scroll, I'd advise you to use a library called Gsap. Look in the scrollTrogger document.
Simply use the scroll event on the whole document:
document.addEventListener('scroll', function(e) {
move();
});
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 95) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
<div style="height:1000px;width:100%;">
<div style="height:200px">padding</div>
<div id="myBar" style="background:green;">my bar</div>
</div>
So I have to make a countdown of where the images show up and they slide in random directions. I have gotten the countdown to work, but the shapes do not move. I could only use Javascript, no JQuery. Here is my code so far:
https://jsfiddle.net/IyamSIM/L6umLkt8/
function countdown() {
var seconds;
var way;
seconds = document.getElementById('countdown').innerHTML;
seconds = parseInt(seconds, 10);
if (seconds == 1) {
way = document.getElementById('countdown');
way.innerHTML = "End";
ham();
sis();
wash();
return;
}
seconds--;
way = document.getElementById('countdown');
way.innerHTML = seconds;
timeoutMyStop = setTimeout(countdown, 100);
}
countdown();
function ham() {
var elem = document.getElementById("ham");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 550) {} else {
pos++;
elem.style.bottom = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function sis() {
var elem = document.getElementById("sis");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 250) {} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
function wash() {
var elem = document.getElementById("wash");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 290) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
img{
width: 100px;
height: 100px;
}
<body>
<h1>Countdown Surprise Assignment</h1>
<center><div id="countdown">10</div></center>
<img id ="ham" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/hamilton.jpg">
<img id ="sis" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/sisters.jpg">
<img id ="sis" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/washington.jpg">
You could let CSS3 do the job for you.
Also why don't you create a random function generator? That's what you need after all, the one below will generate a number given a min and max value range.
var EL_countdown = document.getElementById('countdown'),
ELs_card = document.getElementsByClassName('card'),
sec = 10;
// random generator
function rnd(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function countdown() {
sec--;
EL_countdown.innerHTML = !sec ? "End" : sec;
if (!sec) return flyTime();
else setTimeout(countdown, 100);
}
// Assign a random transition-timing and translate(x, y) position
function flyTime() {
// assign CSS3 transition and transform to every card
for (var i = 0; i < ELs_card.length; i++) {
ELs_card[i].style.transition = rnd(1, 6) + "s";
ELs_card[i].style.transform = "translate(" + rnd(20, 250) + "px, " + rnd(30, 120) + "px)";
}
}
countdown();
<div id="countdown">-</div>
<img class="card" src="//placehold.it/50x50/0bf">
<img class="card" src="//placehold.it/50x50/f0b">
<img class="card" src="//placehold.it/50x50/fb0">
i have time progress bar. i use this code.i need time runner inside blue box.
how can i fix it, means when the yellow bar move depends on time need a time
display box.
var timer = 0,
perc = 0,
timeTotal = 2500,
timeCount = 1,
cFlag;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').text(y + "%");
}
function animateUpdate() {
if(perc < timeTotal) {
perc++;
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag == undefined) {
clearTimeout(timer);
perc = 0;
cFlag = true;
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});
#pbar_outerdiv { cursor: pointer; }
You already have the actual time in the updateProgress() method, so its as simple as changing the line setting the percentage to this:
$('#pbar_innertext').text((percentage / 100).toFixed(2) + " s");
JSFiddle: https://jsfiddle.net/McNetic/hnfRe/395/
Edit: With different browser, I now see the next problem: The animation can take much longer than the advertised time of 2500 ms (because of the very high update frequency of 1000 frames per second). So you should do less animation frames and calculate the percentage base on actual time measuring, like this:
https://jsfiddle.net/McNetic/hnfRe/396/
Check this JSFiddle. You can adjust the CSS: colours, sizes, etc to your needs.
Basically I put the text outside the #pbar_innerdiv in a span box.
<div id="pbar_outerdiv">
<div id="pbar_innerdiv"></div>
<span id="pbar_innertext">Click!</span>
</div>
Edit
So I edited the script and I hope now it matches your needs: JSFiddle Link. This is the script I used:
var timer = 0,
perc = 0,
percIncreaser,
timeTotal = 2500, //Only change this value time according to your need
timeCount = 1,
secondsCount=0,
cFlag;
function updateProgress(percentage,time) {
//var x = (percentage/timeTotal)*100;
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').text(time/1000 + "s");
}
function animateUpdate() {
if(perc < timeTotal) {
perc+=percIncreaser;
secondsCount+=10;
updateProgress(perc,secondsCount);
if(perc>=100) clearTimeout(timer);
else timer = setTimeout(animateUpdate, timeCount);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
percIncreaser = 100/timeTotal*10;
if (cFlag == undefined) {
clearTimeout(timer);
perc = 0;
cFlag = true;
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});
Ok I have some JS that depending on the percentage the progress bar will load and display the % inside the bar.
see working code bellow
$("#next-button").click(function() {
a.eventHub.publish("ui/nextclick")
});
UI.prototype.updatePercentile = function(a) {
if (this.isStandalone || -1 == a.percentile) $("#results-percentages")
.hide();
else {
$("#results-percentages")
.show(), $("#results-percentile-1")
.html(a.percentile), $("#results-suffix")
.html(a.suffix), $("#results-suffix-2")
.html(a.suffix), 1 === a.timesTaken ? ($("#results-timestaken")
.html(a.timesTaken + " time"), $("#results-percentile-2")
.html("100")) : ($("#results-timestaken")
.html(a.timesTaken + " times"), $("#results-percentile-2")
.html(a.percentile));
var b = 0;
$("#percentile-scale .scale-item")
.each(function() {
b += $(this)
.outerWidth()
}), $("#percentile-scale .scale-indicator").css("width", b * a.percentile / 100 + "%"),
$(".scale-marker").css("left", b * a.percentile / 100 + "%")
}
}
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-percentile-2").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + '%';
}
}
}
however now i want to pull in a ne ID to add along side the percentage do it will display like 10th or 3rd depending on the score, however when i alter my JS to include the other ID (See bellow) it just shows the th, rd or st no the number.
HTML
<h3 style="text-align: left;"> You scored in the <em class="big-six"><span id="results-percentile-1"></span><span id="results-suffix-2"></span></em> percentile.
</h3>
<div class="myProgress">
<div id="myBar" style="width:0">
<div id="demo"><span id="results-suffix"></span></div>
<!--<div id="demo"></div>-->
</div>
JS
(function() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + document.getElementById("results-suffix").innerHTML ;
}
}
}());
IDs MUST be unique. If you need multiple elements with the same identifier, use a class.
For example:
<div id="myBar" style="width:0">
<div class="demo"><span class="results-suffix"></span></div>
<div class="demo"></div>
</div>
And your javascript would change to:
function frame() {
if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
var demoElems = document.getElementsByClassName('demo');
var i, innerHTML, resultsElems;
// loop through the list of elements
for(i = 0; i < demoElems.length; i++) {
resultsElems = demoElems[i].getElementsByClassName('results-suffix')
innerHTML = width * 1;
// only append the results-suffix element if it exists
if(resultsElems.length > 0) {
innerHTML += resultsElems[0].innerHTML;
}
demoElems[i].innerHTML = innerHTML;
}
}
}
I want to create a progress bar that has a duration ( the time that it takes to finish the animation) and a percentage.
So I want this progress bar to take 3000ms to finish ( to get to 100%):
So far :
<div id="box"></div>
<script>
function start(){
var duration = 5000; // it should finish in 5 seconds !
var max = 100;
var i = 0 ;
var interval = setInterval(function(){
i++;
offset = (max*i)/duration;
console.log(offset);
$("#box").css("width", offset + "px");
$("#box").text(parseInt(offset) + "%");
if(i>=duration){
alert("done "+i);
clearInterval(interval);
}
}, 1);
}
</script>
It works but it takes way longer that 5000ms .
I've also added Jquery tag because I don't care if I do this with javascript or jquery
Thanks guys.
Feel free to tweak the below as needed, but the main problems are fixed. Namely, your interval shouldn't be running every 1 millisecond, and it should complete at 100%. The below will set your interval to always run at each 1%.
function start(){
var duration = 5000; // it should finish in 5 seconds !
var percent = duration / 100; // 1 percent of duration
var i = 0 ;
var interval = setInterval(function(){
i++;
$("#box").css("width", i + "px");
$("#box").text(i + "%");
if(i>=100){
alert("done");
clearInterval(interval);
}
}, percent);
}
The simplest solution could be is ot use jQuery's .animate()
function start() {
var duration = 5000; // it should finish in 5 seconds !
$("#box").stop().css("width", 0).animate({
width: 100
}, {
duration: duration,
progress: function(promise, progress, ms) {
$(this).text(Math.round(progress * 100) + '%');
}
});
}
start()
#box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>
another solution will be is to look at the time difference
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = new Date().getTime();
var interval = setInterval(function() {
var diff = Math.round(new Date().getTime() - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$("#box").css("width", val + "px");
$("#box").text(val + "%");
if (diff >= duration) {
clearInterval(interval);
}
}, 100);
}
start()
#box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>
Same using requestAnimationFrame
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = window.performance.now();
window.requestAnimationFrame(function step(time) {
var diff = Math.round(time - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$("#box").css("width", val + "px");
$("#box").text(val + "%");
if (diff < duration) {
window.requestAnimationFrame(step);
}
})
}
start()
#box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>
Not sure if you're using it yet, but you could bootstrap to do this.
<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
var value = 0;
function start(){
value += 5;
$( ".progress-bar" ).css("width", value+"%").attr("aria-valuenow", value);
if ( value%5 == 0 ) {
return setTimeout(restart, 100);
}
if(value >= 100)
return;
else
setTimeout(restart, 50);
}
function restart() {
start();
}
I used the answer provided by some of you but you got one thing wrong on the progress bar. You need to change the "px" in jquery to be "%" otherwise the progress bar will only be 100px wide. Since I am using the Bootstrap Progress bar the values here amend to what is already there and fill up the progress wrapper as the page loads.
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = window.performance.now();
window.requestAnimationFrame(function step(time) {
var diff = Math.round(time - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$(".progress-bar").css("width", val + "%");
$(".progress-bar").text(val + "%");
if (diff < duration) {
window.requestAnimationFrame(step);
}
})
}
start()