usablica / progress.js Goto Github PK

ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

Home Page: http://usablica.github.io/progress.js/

License: MIT License

JavaScript 77.71% CSS 22.29%

progress.js's People

Contributors

Stargazers

Watchers

Forkers

afshinm meai1 sbmelvin sajinct smillea fuycadw toddsantoro thierryrene greco nvdnkpr send2moran zain101 gabrielem kix en4ce r0mk1n ferlyz05 mbehtemam donnigunawan williamli morozd lelop awesome hethune adamhut rodrigoluizgenz gitlisted iolufemi chris-rusu gavinlin visense angck drjova yashilanka snoop nanoman689 irfan fixitschultz osean mobilehtml5 arjunmenon jacobking connorkrammer artyom4d elmalki ihsanrama oshri justgeek openube denozzo alexisarce neilgee teknotica sloppyzz cloozis harat wzqivan mpilha oscarenas kmusaied hebertsilva karimabdul alexbeauchemin milstein dustincys lemkepf eiriklv kelber msrobot0 soumeetrak alihalabyah marshall-lee lyfei022 humm2009 bhuvan-ganesan vpineda7 ryanyr liuchengfeng ethanliew agentk86 boyanking chenxisun66 beeramtheman e10 turionboy arrolin herroherren ahmadawais maffoobristol nullnotfound bkkoos spmjs zsae lifedever snowattitudes manhere mrdotl unaheidi liujunlin dirahul

progress.js's Issues

best practise with BackboneJs

do you have workaround using this with BackboneJs. Sorry if this question bothers you

Proggress bar position after resizing browser window

Using progressjs on an element, when the browser window is resized, or element change its position (i.e: after appending an message box above the element, so the element moves down), the proggress seems to stick in its original place and won't follow the element.

how to use?

Hi,

maybe a very simple question, but is it supposed to work like that?

<html>
<head>
<script src="src/progress.js"></script>
<link rel="stylesheet" href="src/progressjs.css">
<script>
progressJs("#bild1").start();
</script>
</head>
<body>
<div id="bild1">
<img src="bild.JPG" width="1200">
</div>
</body>
</html>

I don't see anything but the image - but no effect for preloading?

thank you

Progress Percent goes upto 1% then stop.

I was trying to implement progress js as a whole page loader.
i will include both progress css and js and call this on head of my page.

but it goes upto 1% and then stops.

Progress not set correctly when exceeding textarea max character limit (demo)

Small issue with the progress bar not filling all the way on repeated text input.

To reproduce:

Focus the textarea demo.
Type until the progress bar is 3/4 full.
Stop, and note that the progress bar does fill up correctly.
Now switch to a new line, and hold down any key. Characters will be inserted as long as the key is held down, and extra characters will be erased on keyup. However, the progress bar will not update correctly to 100% in this scenario.

On a related note, it might be prudent not to allow characters to be inserted at all if the character limit is exceeded -- binding to the 'keypress' event and disallowing any keypress except the backspace key would work. Something like:

var maxChars = 200;
var keyCodeBackspace = 8;
var keyCodeDelete = 46;

// Prevent input when textarea character limit exceeded. Allow deleting characters.
textarea.addEventListener('keypress', function(event) {
    if (textarea.value.length >= maxChars
      && event.keyCode !== keyCodeBackspace
      && event.keyCode !== keyCodeDelete) {
        event.preventDefault();
    }
});

Should use requestAnimationFrame rather than SetTimeout for animation.

Is there any particular reason that setTimeout has been chosen for animation and requestAnimationFrame have not been used?

Phonegap

How to use this loading bar in phonegap/cordova?

Related to prgress bar

hi
i would like to ask that instead of showing blue theme, how can i show the circle progress bar with percentage. Please try to response as much as possible.

Progress bar length after resizing browser window

Using progress bar on the top of a page, when the progress hits 50%, if I resize browser window, the width of the progress bar won't resize accordingly.

As you can see above, after I resize the window, the length of the progress bar doesn't change. This might be a corner case but it just doesn't make sense.

Ability to "kill" the progress bar when ending, rather than it animating and fading out

I have some use cases where I have a progress bar that needs to be instantly cancelled, for example if my app gets an error and need to show an overlay. The progress bar will float on top of that element for (I think) 1500 milliseconds before fading out.

I've made a few minor adjustments to the source in this JSbin, namely adding an animate parameter to the progressJS().end() method. By calling progressJS().end(false), the timeouts will be set to 1 millisecond, which for all intents and purposes will cause the progress bar to disappear immediately. JSbin is here:
http://jsbin.com/takeq/2/edit

Modifications are at line 281 in the _end() method. There's also an example of its usage at the end.

I've noticed that this repo hasn't really had all that much activity- and only a handful of commits- so I don't want to start doing any pull requests, but maybe it could be considered, @afshinm ? I have a few things that I could do with the project if there's no current work being done on it, for example issues #10 and #11 which I think are quite important- let me know! 😄

Thanks a lot!

Problem when onprogress

pj.start().autoIncrease(30, 500).onprogress(function(targetElm, percent) {
if(percent > 80){
pj.end();
}
});

code on line 327: percentElement.parentNode.parentNode.removeChild(percentElement.parentNode);

will be null

Include a proper Documentation

I just try to integrate this to my web page. But it's kind a hard to me because I'm new & there is no proper documentation I can find. Please it will nice if you add a documentation to the source package.

Progress.js is now available at PageCDN

Progress.js is now available at PageCDN. The latest version is at: https://pagecdn.com/lib/progress.js

Latest version - Compressed with brotli-q11 settings:

<link rel="stylesheet" href="https://pagecdn.io/lib/progress.js/0.1.0/progressjs.min.css" integrity="sha256-m41xTDkrSptkkc2bzyb902dDCy/YoJ4gMfMNexQ1JwU=" crossorigin="anonymous">

<script src="https://pagecdn.io/lib/progress.js/0.1.0/progress.min.js" integrity="sha256-USHpqyG25gg7qT3Fct9R1kLVVFIuUson6rg8qfxRGdA=" crossorigin="anonymous"></script>

Thanks.

Textarea and Text Input key repeat are broken.

Hold down a key within the text input or text area, the key should repeat. On FF it does not. I did not try on any other browser.