Code

Progress Cube

Progress Cube

» 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.

by
by
by
by
by
by