» Introduction
The world´s smallest and most compact progress indicator for percental visualizing of a process or event in web apps, mobile apps and so on.
» Key Facts
- Progress cube overall size: 16×16 pixel
- Progress cube calculation size: 10×10 pixel
- Progress range coverage: 0% – 100%
- Progress formula: 1% = 1pixel => 100% = 100pixel
- Progress cube background color: transparent
- Progress cube value colors: At the moment only available in dark gray
- Dependencies: HTML5, CSS3, Javascript
- Required knowledge: Javascript basics and usage of HTML5 data attributes and it’s corresponding dataset API
- Compatible browsers: IE9, IE10, IE11, Edge, Firefox, Safari, Opera, Chrome
» Intention
The goal intention for developing this binary gadget was the dissatisfaction with the width in pixel of the most progress bars and circular progress indicators. For example, visualizing 100% with standard progress bars almost always requires a minimum of 100 pixel of space. Due to this reason a progress bar very often is not suitable in a HTML table cell where the column width should be hold at a minimum width.
» Usage
You can use this tiny progress cube in your web or mobile applications for every situation where a progress between 0 and 100 must be recorded. I currently use it in my file explorer as file upload progress indicator and in my loading dialog as page load progress indicator. You can even abuse it as a preloader if you endless loop the complete indicator range for a specific time. Basically, this progress cube can be used almost everywhere in your documents like an ordinary icon due to it´s compact size of 16×16 pixel.
» Architecture
Each progress cube consists of 1 x PNG image sprite, 1 x PNG background image, 120 lines of CSS code, 3 lines of HTML code where the progress cube type must be defined and generally 1 line of Javascript code which is responsible for the percental visualization.
» Setup
The progress cube download package includes a short and precise setup guide.
» Updates
I am sure more progress cube types with different colors will be customized by me in the near future. It only depends on my spare time.