Progress Bars
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments
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
- HTML5 technology - Zoom Progress Bars uses the latest html5 and css3 features
- fully responsive - looks great from mobile to HD
- skin builder - build your own skin in minutes, create multiple skins and all will be remembered
- SCSS Powered - easy for developers to modify
- Retina-ready - graphics generally use svg, vectors and font icons so it displays crisp on retina devices
- easy install - purchase, download the zip, read the docs
- iPhone / iPad optimized - this gallery has been optimized for Apple touch devices
- Android optimized - this component has been tested on Android 4.0 and works awesome
- developer / SASS powered - this component's CSS has been built on top of SASS which means SASS users will have an easy time modifying the skins. For non-SASS users it's no problem either because CSS files ( generated by SASS ) are provided
- compatible with all major browsers, including IE - compatible from IE9 to IE11, Chrome, Safari and Firefox
Installation - top
- Just download the zip from your http://codecanyon.net/user/yourusername/downloads directory in a folder of your choosing.
-
Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:
- Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
- You can now get to your WP Dashboard > Progress Bars and customize skins to your needs.
- 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
- access / create your post / page
- click the Progress Bars generator icon
- 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:
Let's analyze a simple shortcode
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
.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
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:
- .zip – Normally you could just right click and extract to a folder of choice [ on both Mac and Windows ]
- .html - Notepad++
- .js - Notepad++
- .as - Notepad++
- .fla - Flash CS5
- .xml – Notepad++