{"id":12057,"date":"2016-12-26T15:50:44","date_gmt":"2016-12-26T15:50:44","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=12057"},"modified":"2017-04-06T12:19:14","modified_gmt":"2017-04-06T12:19:14","slug":"progress-bar","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/progress-bar","title":{"rendered":"Progress Bar"},"content":{"rendered":"

[vc_row 0=””][vc_column css=”.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}” col_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” col_shadow_hover=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)”][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][vc_column_text 0=””]<\/p>\n

Present the progress bar in the\u00a0stylish way\u00a0for your customers with multi-purpose Progress Bar module.<\/p>\n

You may check the examples of the modules with this link<\/a>.<\/p>\n

Watch the video tutorial on Progress Bar module creation<\/a> for more details.<\/h5>\n

[\/vc_column_text][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][dfd_tta_tabs border_radius=”4″ alignment=”left” active_section=”1″ active_tab_background=”#3b55e6″ tab_hover_text_color=”#3b55e6″ tab_active_color_text=”#ffffff” border_color_active=”#3b55e6″][vc_tta_section title=”General settings” tab_id=”1486545572585-2437c7e1-5371″][vc_column_text 0=””]<\/p>\n

General settings<\/h3>\n

<\/p>\n

    \n
  • Style<\/strong> – select the style of the progress bar which suits you more.\n
      \n
    • Simple<\/strong> – the progress bar is displayed in a simple style, without the decorations borders.<\/li>\n
    • Underlined<\/strong> – there is bottom lime decoration added for the progress bar.<\/li>\n
    • Info inside<\/strong> – the progress bar content is displayed inside the bar itself.<\/li>\n<\/ul>\n<\/li>\n
    • Progress value<\/strong> –\u00a0enter the progress value.<\/li>\n
    • Icon<\/strong> – switch it to Enable<\/strong> to display the icons for the progress bar.<\/li>\n
    • Title<\/strong> – enter the title for the progress bar element.<\/li>\n<\/ul>\n
      Extra features<\/h5>\n
        \n
      • Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n
      • Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type custom-style<\/strong> class and then go to Theme options<\/del>\u00a0General options<\/del>\u00a0Custom CSS\/JS<\/del> Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n

        [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Icon settings” tab_id=”1486545572829-e1c1304c-ee12″][vc_column_text 0=””]<\/p>\n

        Icon settings<\/h3>\n

        Available if the Icon is enabled in general settings section of the module.<\/h4>\n

        <\/h3>\n
          \n
        • Icon library<\/strong> –\u00a0choose the icon library for the module.<\/li>\n
        • Select icon<\/strong>\u00a0\u2013 select the icon to be displayed in the module.<\/li>\n
        • Size<\/strong> \u2013 set the size for the icon.<\/li>\n
        • Color<\/strong> \u2013 choose the icon color. The default color is #28262b.<\/li>\n<\/ul>\n

          <\/h3>\n

          [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Style settings” tab_id=”1486545573068-02c117a6-3d50″][vc_column_text 0=””]<\/p>\n

          Style settings<\/h3>\n

          General styles<\/h5>\n

          <\/p>\n

            \n
          • Progress line height<\/strong> –\u00a0allows you to set the progress bar height.<\/li>\n
          • Percents near title<\/strong> – switch it to Enable<\/strong> to display percents to the left from title.<\/li>\n
          • Progress animation<\/strong> – allows you to enable or disable the progress animation.<\/li>\n
          • Slanting lines decoration<\/strong> – switch it to Enable<\/strong> to display the slanting lines inside the bar (effect of constantly moving bar).<\/li>\n
          • Lines animation<\/strong> – set it to Enable<\/strong> to activate the effect of constantly moving bar with slanting lines inside.<\/li>\n
          • Title position<\/strong> – select the position of the title. It can be displayed at the\u00a0top<\/strong> and bottom<\/strong> from the progress bar.<\/li>\n<\/ul>\n
            Back line<\/h5>\n
            Style the general line background of the module not filled with the progress line.<\/h6>\n

            <\/p>\n

              \n
            • Back line background<\/strong> – select the background color for the back line.\u00a0The default color is #e7e7e7.<\/li>\n
            • Border style<\/strong> \u2013 select one of the available border styles for the button.\u00a0Dotted<\/strong>, dashed<\/strong> and solid<\/strong> variants are available.\u00a0Theme default<\/strong> style will be inherited directly from Theme options<\/del> General options<\/del> Default button options\u00a0<\/del>Default button border style<\/del>.<\/li>\n
            • Color<\/strong> \u2013 specify the color of the border.<\/li>\n
            • Border radius<\/strong> \u2013 select the border radius for button module to have rounded corners.<\/li>\n
            • Border width<\/strong> \u2013 set the width of the border. You may set the desired width each border: top, right, left<\/strong> and bottom<\/strong>.<\/li>\n<\/ul>\n
              Progress line<\/h5>\n

              <\/p>\n

                \n
              • Background style<\/strong> – select the background style for the progress line.\n
                  \n
                • Solid<\/strong> – one background color is set for the progress bar.\n
                    \n
                  • Background<\/strong> – choose the color for the progress line. The default color is\u00a0inherited fromTheme Options<\/del>Styling Options<\/del>Main site color<\/del>.<\/li>\n<\/ul>\n<\/li>\n
                  • Gradient<\/strong> – you may select several color to be displayed as gradient background color for the progress line. (You may select as many color as you want simply clicking on the color bar in the necessary place to add a new color).\n
                      \n
                    • Gradient type<\/strong> – select what gradient type you want to apply for the progress bar. You may select horizontal<\/strong>, vertical<\/strong> or custom<\/strong> to be able to enter custom direction in degrees.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                      [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Typography settings” tab_id=”1486545573311-423c930f-c6e7″][vc_column_text 0=””]<\/p>\n

                      Typography settings<\/h3>\n

                      \"\"<\/p>\n

                      Title typography<\/h5>\n

                      These settings are inherited from Theme options<\/del> Typography\/Fonts<\/del>\u00a0Text typography<\/del>\u00a0Default text Typography\u00a0<\/del>. Font size is 13px by default. For the\u00a0Info inside<\/strong>, the color is set to #fff by default.<\/p>\n

                        \n
                      • Element tag<\/strong> \u2013 select the tag for the title.<\/li>\n
                      • Font size<\/strong> \u2013 set the font size you need to use in the title.<\/li>\n
                      • Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n
                      • Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the title text.<\/li>\n
                      • Text color<\/strong> \u2013 set the color of the font.<\/li>\n
                      • Custom font family<\/strong> \u2013 set it to Enable<\/strong> to use custom Google font.\n
                          \n
                        • Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n
                        • Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                          Number typography<\/h5>\n

                          These settings are inherited from Theme options<\/del> Typography\/Fonts<\/del>\u00a0Text typography<\/del>\u00a0Default text Typography\u00a0<\/del>. For the\u00a0Info inside<\/strong>, the color is set to #fff by default.<\/p>\n

                            \n
                          • Element tag<\/strong> \u2013 select the tag for the numbers.<\/li>\n
                          • Font size<\/strong> \u2013 set the font size you need to use in the numbers.<\/li>\n
                          • Letter spacing<\/strong> \u2013 set the needed distance between letters in the numbers.<\/li>\n
                          • Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the numbers text.<\/li>\n
                          • Text color<\/strong> \u2013 set the color of the font.<\/li>\n
                          • Custom font family<\/strong> \u2013 set it to Enable<\/strong> to use custom Google font.\n
                              \n
                            • Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n
                            • Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                              [\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

                              Present the progress bar in the stylish way for your customers with multi-purpose Progress Bar module.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[29,23,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12057"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=12057"}],"version-history":[{"count":6,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12057\/revisions"}],"predecessor-version":[{"id":12479,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12057\/revisions\/12479"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=12057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=12057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=12057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}