Last Update 22 March 17
Created 22 March 17
High Resolution Yes
Compatible Browsers IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
Files Included JavaScript JS, HTML, CSS
Software Version CSS3
Tags animation, cube, grid, icon, measure, percent, pixel, preloader, process, progress, small, table, tiny, upload, visualize
Download Rating

Progress Cube CSS

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

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>