Progress Bars

Created: 03/04/2016
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments
Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, you can ask them in the Item Discussions.

 

 

 

Intro - top

Zoom Progress Bars Intro - top

Zoom Progress Bars is the perfect tool to create custom progress bars to your wishing .

WordPress ZoomTabs Features

 

 


Installation - top

 

  1. Just download the zip from your http://codecanyon.net/user/yourusername/downloads directory in a folder of your choosing.
  2. Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:
  3. Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
  4. You can now get to your WP Dashboard > Progress Bars and customize skins to your needs.
  5. The Zoom Progress Bars is up and running now.

This video should make it crystal clear on how to install and add some data:

 

 


Adding to the Post / Page - top

  1. access / create your post / page
  2. click the Progress Bars generator icon
  3. all done!

 


Customize - top

  tutorial videos - here


Several examples are included in the package, 6 skins are included in the builder so you can quick start your editing. You can have variables that are replaced dinamically while the progress bars animate. Might be overwhelming to understand them all but you can search the examples for easily understanding. A cheatsheet can be found below:

 

The Settings
{{perc}}
outputs the current percentage, for exaample if the progress is at 47% it will output 47%
 
{{perc-decimal}}
outputs the current percentage in decimal form, for example if the progress is at 47% it will output 0.47
 
{{perc100-decimal}}
it's the same as perc-decimal but the difference is it will go up until 1 even if the Percent is set to lower then 100%
 
{{center}}
it will center the element, currently available only for the Top property
 
{{percmaxnr}}
outputs the current number relative the percent, you set the number in the <strong>Animation Number</strong> field.
 
 
Let's analyze a simple shortcode
[dzsprogressbar skin="prev1" arg1_perc="52" arg2_maxnr="300"]{{perc}} {{percmaxnr}}[/dzsprogressbar]

skin – the selected skin

arg1_perc – the percent at which the circle animates

arg2_maxnr – the final number ( will only come to this exact value when perc is animated finally to 100 )

- – the rest of the variables can be inside the content

 

{{perc}} -outputs the current percentage, for exaample if the progress is at 47% it will output 47%

{{perc-decimal}} – outputs the current percentage in decimal form, for example if the progress is at 47% it will output 0.47

{{perc100-decimal}} – it’s the same as perc-decimal but the difference is it will go up until 1 even if the Percent is set to lower then 100%

{{center}} – it will center the element, currently available only for the Top property

{{percmaxnr}} – outputs the current number relative the percent, you set the number in the Animation Number field.

 
 
How to use the builder

You can create multiple skins and save them via the included builder.

 
How to use special font on the progress bars text

Just write this in your WP Dashboard > Zoom Progress Bars > Settings , Extra CSS field

<style>
.dzs-progress-bar{
font-family: "Open Sans", sans-sarif;
font-weight: 300;
}
</style>

 

How to setup a multi column

Like so:

Youu can use a page builder ( like Visual Composer ) .. or if you don't have one. You can just select the Text editor in the post edit screen and write this html code

<div style="font-size:0;"> <div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="100"][/dzsprogressbar] </div><div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="150"][/dzsprogressbar] </div><div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="100"][/dzsprogressbar] </div><div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="100"][/dzsprogressbar] </div> </div>

 

How to place a number counting to the max number

 

When modifying the skin you want to use, or creating a new one, just click the number you want to go to max number.

Then make sure it reads {{percmaxnr}}

 

How to place progress bars in any page builder

 

Progress Bars only has native support for Cornerstone and Visual Composer, but it does not mean you cannot use it in other page builders. You just have to go to Progress Bars > Settings > Shortcode Generator , choose the settings and just copy the shortcode generated , and paste it in a text element from your page builder.

 

 

 

 

 

 

 



FAQ - top

You can check this link for a list of popular questions.

 


Developer Tips ( for advanced usage ) - top

This gallery provides all source files so if you are developer you can start customizing it.

Recommended Programs

You can generally use any text editing software to edit most content/code, but this is what I recommend: