Type anywhere to search
logo

progress

Getting started

Custom built for anyone, anywhere.

As always, in keeping with our policy of making UX easier and more user-friendly, we have customized this feature with a lightwieight SVG indicator. Also this is highly adaptable and offers a range of progress bar options to suit your preference.


Avatar

VIA senior product manage
for UI/UX at REVOX

Progress
Linear progress

A progress bar is a visual way of showing how much of a curtain task has being completed. We made it light weighted and simple as possible just for a better user experience.A progress can be indeterminate or determinate according to the length of a task.



Indeterminate progress


Determinate progress

Determinate bar
Indeterminate bar
Linear progress options
Indeterminate progress bar

This progress is used when the length of the task is unknown. Thus shows a repetitive cycle. With the use of a scalable vector graphic we made it light weighted and simple for a better UX.

Determinate progress bar

This progress is used when the length of the task can be measured and visually shown.Thus for linear progress determinate is used frequently. To use simply use .progress-bar-determinate

Colour options

You can also apply any colour suited according to the nature of the task.


All the colours included in pages color pallete is applicable.

Bar sizes

You can also use a thinner version of the default progress by simple changing .progress-small

Circular progress

Circular progress is frequently used to show a repetitive cycle for its shape. But breaking convention a circular progress can be indeterminate or determinate according to a task.We developed it mainly for a better UX.




Indeterminate Progress


Determinate Progress

Determinate circle
Indeterminate circle
Circular progress options
Indeterminate progress

This is mostly used for its repetitive circular shape for tasks which the time cannot be measured. With the use of SVG the size can be scaled to any preferred amount by the user without any quality loss. We developed a custom animation with different timescales for a better user experience.


Determinate progress

Similar to the determinate progress bar, circular progress can also be used to show the length of a task. The determinate circular progress indicator can be initialised without writing a single line of Javascript code.

Color options

Complete Progress bar color

Set data attribute data-color to "complete"

Complete Progress bar color

Set data attribute data-color to "primary"

All the colours included in pages color pallete is applicable


Circular progress sizes

In circular progress you can change the stroke width

Default progress with a stroke of 3px


Progress with a stroke of 3px

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
21st april 2014 2:13am

Press enter to search

suggestions :

Pages Search Results

ice cream on pages

via john smith

T
ice cream related topics

via pages

ice cream music

via pagesmix

ice cream on facebook

via facebook

Tweats on ice cream

via twitter

Circles on ice cream

via google plus