Progress Bar Particle

The most common use of such a progress bar is to display level of completion of some kind of process. See how Progress Bar can be designed beautifully on Demo Page.

# Progress Bar Package contents

Files Description
jlprogress-bar.yaml Contains the Progress Bar particle settings.

jlprogress-bar.html.twig The Twig file to pull information, settings.
progressbar.min.js / jquery.waypoints.min.js Contains the Progress Bar JavaScript library.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Progress Bar requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Progress Bar particle (i.e: Home) -> Layout tab -> Drag and drop the Progress Bar Particle from Particles panel (left corner) to the section you want to display the progress.

Settings

Items You can add new items to the collection using the plus + icon

Settings Description
Text Enter text of progress bar.
Percent Enter percentage number of progress bar.
Stroke Color Customize stroke color of progress bar (Optional).
Trail Color Customize trail color of progress bar (Optional).

Progress Common settings for Progress Bar

Settings Description
Shape Select progress shape (03 styles).
Duration Animation duration (milliseconds).
Items List text items to animate. You can add new items to the collection using the plus + icon
Stroke width Width of the stroke.
Grid Settings Common settings for grid system
Column Gap Set the size of the gap between the grid columns.
Row Gap Set the size of the gap between the grid rows.
Center columns Use this option to center the grid cell columns.
Center rows Use this option to center the grid row columns.
Show dividers Display dividers between grid cells

Columns settings Choose the columns on each devices for slider or grid content style.

Settings Description
Phone Portrait Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
Phone Landscape
Tablet Landscape
Desktop
Large Screens
CSS Classes CSS class name for the particle.

Style Tab

Title Settings Common settings for Title Style

Settings Description
Style Heading styles differ in font-size but may also come with a predefined color, size and font.
Decoration Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
Predefined Color Select a predefined text color.
Custom Color Customize the title color instead using predefined title color mode.
You need to set the predefined color to None to use the customize color option.
Font Size Customize the title text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
HTML Element Choose one of the elements to fit your semantic structure.
Margin Top Set the top margin.

Line Shape Settings Color customization for Line Shape

Settings Description
Line Shape Color Customize the line shape color.
Label Font Size Customize the line shape font size.
Line Margin Top Customize the margin top space.
Alignment Align the bar above or below the title.
Margin Top Set the top margin.

Label Settings Color customization for Label

Settings Description
Predefined Color Select the text color.
Custom Color Customize the title color. You need to set the Predefined Color to None before using the color customization.
Font Size Customize the Font Size for Label.
Alignment Align the label auto, left or right.

Circle Shape Settings Color customization for Circle Shape

Settings Description
Circle Color Customize the line Circle shape color.
Circle Font Size Customize the line shape font size.

SemiCircle Settings Color customization for SemiCircle

Settings Description
SemiCircle Color Customize the line Circle shape color.
SemiCircle Font Size Customize the line shape font size.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Video Tutorial

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

JoomLead Gantry 5 Particles 2.1.3 released See what's new
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now