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

Related tags

Loading Status progress.js
Overview

ProgressJS

ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for every object on the page.

How To Use

  1. Include progress.js and progressjs.css in the page (use the minified version from minified folder for production)

  2. Execute the following JavaScript code in the page:

//to set progress-bar for whole page
progressJs().start();
//or for specific element
progressJs("#targetElement").start();

Use other methods to increase, decrease or set an auto-increase function for your progress-bar. Furthermore, you can change the template using setOption method.

API

Check the API and method usage with example here: https://github.com/usablica/progress.js/wiki/API

Build

First, you should install nodejs and npm, then run this command: npm install to install all dependencies.

Now you can run this command to minify all the static resources:

make build

Roadmap

  • Add example folder and provide examples
  • More browser compatibility + mobile/tablet device support
  • Add more templates

Release History

  • v0.1.0 - 2014-02-14
    • First version
    • Increase, decrease and auto-increase functions
    • Ability to design and add templates

Author

Afshin Mehrabani

License

Copyright (C) 2012 Afshin Mehrabani ([email protected])

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Ability to

    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! :smile:

    Thanks a lot!

    opened by MaffooBristol 2
  • Progress bar length after resizing browser window

    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.

    image

    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.

    opened by rebornix 2
  • Progress.js is now available at PageCDN

    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.

    opened by praisedpk 1
  • how to use?

    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

    opened by mgk89 1
  • Added decrease() and autoDecrease()

    Added decrease() and autoDecrease()

    The functions _autoDecrease and _decreasePercent were added, as well as 'bound' to progressJs.decrease() and progressJs.autoDecrease().

    These functions can, for example, be used to decrease the progressbar when going back in a slideshow, where the progressbar indicated progress of presentation.

    (I apologise for automatic trimming of whitespace, and sincerely hope it doesn't pose any trouble. )

    opened by wanecek 1
  • Include a proper Documentation

    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.

    opened by warapitiya 1
  • adding callbacks for end() and kill()

    adding callbacks for end() and kill()

    I'd like to add callback functions to end() and kill() so that I can execute custom actions when progress has finished. Pretty simple add, if this isn't the intended functionality feel free to ignore.

    opened by MasonOh91 0
  • Related to prgress bar

    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.

    opened by rajeshkumardev 0
  • Progress Percent goes upto 1% then stop.

    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.

    opened by chandra10207 0
  • Remove moot `version` property from bower.json

    Remove moot `version` property from bower.json

    Per bower/bower.json-spec@a325da3

    Also their maintainer says they probably won't ever use it: http://stackoverflow.com/questions/24844901/bowers-bower-json-file-version-property

    opened by kkirsche 0
  • Problem when onprogress

    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

    opened by picacure 0
  • Proggress bar position after resizing browser window

    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.

    progressjs-issue

    opened by philip100 0
Releases(v0.1.0)
Owner
usablica
usablica
GitHub http://usablica.github.io/progress.js/
Automatically add a progress bar to your site.

PACE An automatic web page progress bar. Demo Documentation Include pace.js and the theme css of your choice on your page (as early as is possible), a

null 15.5k Jan 8, 2023
Responsive and slick progress bars

ProgressBar.js Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as y

Kimmo Brunfeldt 7.7k Jan 8, 2023
Very lightweight progress bars. No jQuery

Very lightweight progress bars (~699 bytes gzipped). Compatibility: iE7+ and the rest of the world Demo See nanobar.jacoborus.codes Installation Downl

Jacobo Tabernero 2.9k Dec 19, 2022
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

gc 1.5k Nov 30, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Super lighweight, pure JavaScript page load progress bar

Nanobar Super lighweight, pure JavaScript page load progress bar Status View Preview Table of contents Status Quick Start What's included Bugs and fea

The MUDA Organization 5 Jan 3, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
THE PROJECT IDEA is to create a platform where developers can improve on their typing speed and accuracy by playing a coding typing game in their preferred programming language, which will make developers both beginners and pros get more familiar with the syntax of their programming languages.

Typing Game for Developers to Boost their Typing Speed and Accuracy Read Blog Technologies Yarn React JS Html Css Features ?? Typing Area ?? Ranking ?

Ayodele S. Adebayo 32 Dec 14, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This plugin for Chart.js that makes your bar chart to 100% stacked bar chart.

chartjs-plugin-stacked100 This plugin for Chart.js that makes your bar chart to 100% stacked bar chart. Requires Chart.js 3.x. Demo: https://y-takey.g

y-take 106 Jan 3, 2023
File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

jQuery File Upload Contents Description Demo Features Security Setup Requirements Mandatory requirements Optional requirements Cross-domain requiremen

Sebastian Tschan 31.1k Dec 28, 2022
CLI Progress Bar implemented in NodeJS to track Time, ETA and Steps for any long running jobs in any loops in JS, NodeJS code

NodeJS-ProgressBar CLI Progress Bar for NodeJS and JavaScript to track Time, ETA and Steps for any long running jobs in any loops in JS, NodeJS code D

Atanu Sarkar 5 Nov 14, 2022
Automatically add a progress bar to your site.

PACE An automatic web page progress bar. Demo Documentation Include pace.js and the theme css of your choice on your page (as early as is possible), a

null 15.5k Jan 8, 2023
Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

Elastic Progress Creates a button that turns into a progress bar with a elastic effect. Based on a Dribbble shot by xjw. By Lucas Bebber. Article on C

Codrops 876 Jan 1, 2023
Multi Upload with Progress Bar in Vanilla JS

js-progress-bar-multi-upload Multi Upload with Progress Bar in Vanilla JS Youtube dersinde birlikte hazırladığımız çoklu progress barlı javascript upl

Tayfun Erbilen 11 Jun 10, 2022
A progress bar plugin for Vite.

vite-plugin-progress Display with progress bar when building ?? Install npm i vite-plugin-progress -D # yarn yarn add vite-plugin-progress -D # pn

Jeddy Gong 137 Dec 17, 2022
A progress bar plugin for tasks in Obsidian.

Obsidian Task Progress Bar A plugin for showing task progress bar near the tasks bullet or headings. Only works in Live Preview mode in Obsidian. Sett

Boninall 52 Dec 31, 2022
Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Nishant Tomar 1 Dec 25, 2021
A set of flat and 3D progress button styles where the button itself serves as a progress indicator

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Codrops 608 Oct 19, 2022