Progress bars

[one_fourth][accordiongroup][accordion title=”Add-ons”][sidenav][sideitem link=”http://weblusive-themes.com/evolution/styling/alert-boxes/”]Alert Boxes[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/styling/panels/”]Panels[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/styling/pricing-tables/”]Pricing Tables[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/styling/progress-bars/”]Progress Bars[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/styling/tables/”]Tables[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/styling/thumbnails/”]Thumbnails[/sideitem][sideitem link=”http://weblusive-themes.com/evolution/styling/flex-video/”]Flex Video[/sideitem][/sidenav][/accordion][/accordiongroup] [/one_fourth] [three_fourth]

Progress Bars

A simple way to add a progress bars to your layouts. You only need two HTML elements to make them and they’re easy to customize. [row] [one_half][progressbar meter=”40″ /][/one_half] [two_third][progressbar type=”success” meter=”80″ shape=”radius ” /][/two_third] [five_sixth][progressbar type=”alert” meter=”30″ shape=”round ” /][/five_sixth] [one_whole][progressbar type=”secondary ” meter=”50″ /][/one_whole] [/row] Building progress bars using our predefined classes is simple, you’ll just need to write a <div class="progress"> and inside of that a <span class="meter">. The meter is the element that you can set a width to, either inline or programatically on your own accord. The simplest way to do this is to change the style="width:%" property on the meter, itself. The class options: The color classes include: .secondary, .alert or .success The radius classes include: .radius or .round. You may also you the grid width classes: .small-# or .large-# [/three_fourth]