progress-bar

use the progress bar component to visually represent a task or process's current status and progression by indicating how much time or work remains until completion progress bar configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options core structure value current determines the current status to be shown in the bar this can be dynamically set with an expression, e g =$count(@ctx components packlist state selected) max numeric, set the maximum value of the progress bar, e g , the sales target is 5 new customers a month, making the max 5 you can set the maximum dynamically, e g , using the datasource =$count(@ctx datasources checkbox list) other options color sets the color of the progress bar, choose a color from the provided color palette default color is black if the property is not specified in the yaml errortext add text, string, or expressions to show in text under the progress bar text is shown in red to indicate an error with progress helpertext add text, string, or expressions to guide users by showing text under the progress bar, e g, monthly target is $4000 size choose from extra large , large , medium , small , tiny , with large being the default if property is not specified in the yaml steps numeric with a maximum of 20 use steps to divide up the bar by default, the bar is continuous for example, steps 5 will break down the bar into five equal sections the higher the number of steps the smaller each bar segment becomes style isdisabled can be set to true or false if true the progress bar is disabled subtitle value can add text, string or an expression to show as the subtitle, which is visible under the progress bar align center , left , and right alignment with the default as center if the property is not specified in the yaml color specify the color the subtitle text by choosing a color from the provided color palette position place the subtitle at the bottom or top the top is the default if the property is not specified in the yaml title value can add text, string or an expression to show as the title, which is visible under the progress bar align center , left and right alignment with the default as center if the property is not specified in the yaml color specify the color for the title text by choosing a color from the provided color palette position place the title at the bottom or top of the progress bar the top is the default if the property is not specified in the yaml actions onpress choose from the provided list of available actions, for example, use the go to action to open a different {{jig}} the action is triggered when the progress bar is pressed; e g , navigate to another {{jig}} considerations the title, subtitle, and bar can use a color property ensure the property is added at the correct yaml level for each the component progress bar can only be used on a jig default examples and code snippets examples and code snippets progress bar with title and subtitle this example shows the different ways the title and subtitle can be configured using position , color and alignment example see the full example in github progress bar title subtitle jigx # with title, and subtitle \ type component progress bar options subtitle value 5 new customers position top title value your monthly goal value current 2 max 5 color color1 size extra large \# with title and alignment \ type component progress bar options title value monthly goal is 5 align right color color4 value current 3 max 5 color color2 size large \# with title, subtitle, alignment, and color \ type component progress bar options subtitle value your goal is 5 new customers position bottom align right color color10 title value goal color color11 value current 4 max 5 color color3 size medium \# with subtitle with bottom position \ type component progress bar options subtitle value your goal is 5 new customers position bottom align right color color13 title value your monthly goal color color10 value current 7 max 10 size tiny progress bar with error and helper text you can use the helpertext property to provide a tip or hint to help users read the progress bar use the errortext to show an error or negative text at the bottom of the progress bar in this example, the errortext is used to show that there has been no progress made example see the full example in github progress bar error helper jigx children \ type component section options title helpertext children \ type component progress bar options title value your goal subtitle value 2 of 3 new customers color color5 helpertext hint your monthly goal is 3 new customers value current 2 max 3 color positive \ type component section options title errortext children \ type component progress bar options title value your goal subtitle value 1 of 3 new customers helpertext your monthly goal is 3 new customers errortext progress too slow value current 1 max 5 color color14 progress bar with colors in this example we change the color of the bar, break the bar up by using steps and change the thickness of the bar using the size property example see the full example in github progress bar color jigx children \ type component section options title color children \ type component progress bar options color color2 value current 3 max 7 \ type component section options title color and steps children \ type component progress bar options value current 5 max 10 steps 3 color color1 \ type component section options title color,steps and size children \ type component progress bar options value current 5 max 10 steps 5 color color3 size small progress bar sizes the progress bar can be sized from a thin ( tiny ) to extra thick ( extra large ) bar using the size property no color is used in this example so the default color black is used example see the full example in github progress bar size jigx children \ type component progress bar options title value tiny size tiny value current 1 max 5 \ type component progress bar options title value small size small value current 2 max 5 \ type component progress bar options title value medium size medium value current 3 max 5 \ type component progress bar options title value large size large value current 4 max 5 \ type component progress bar options title value extra large size extra large value current 5 max 5 progress bar with steps the progress bar can be shown as a continous bar or broken up into segments use the step property to determine the number of segments required the larger the number of steps, the smaller the segments as shown in the bars on the left example see the full example in github progress bar steps jigx children \ type component section options title " " children \# with no steps continuous \ type component progress bar options title value no steps continuous value current 1 max 5 \ type component section options title " " children \# with steps 5 \ type component progress bar options steps 5 color color11 title value 5 steps, title and color value current 4 max 5 \ type component section options title " " children \# with steps 20 \ type component progress bar options steps 20 color color12 title value 20 steps value current 10 max 20 progress bar with onpress in this example the onpress property uses the action set state set to true when the progress bar is pressed the state is evaluated in the when property of the component image , which then shows the image example see the full example in github progress bar onpress progress bar onpress jigx children \ type component progress bar options title value congrats! subtitle value press to continue size extra large onpress type action set state options state =@ctx solution state activeitemid value true value current 5 max 5 color positive \ type component image when =@ctx solution state activeitemid = true options source uri https //images unsplash com/photo 1576610981602 438b2860eb77?ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nhx8y29uz3jhdhn8zw58mhx8mhx8fda%3d\&auto=format\&fit=crop\&w=500\&q=60 resizemode cover onrefresh type action reset state options state =@ctx solution state activeitemid dynamic progress bar dynamic progress bar this example shows how the component progress bar steps are dynamically updated when the list item checkbox is selected the errortext property and the helpertext property are dynamically changed using an expression example see the full example in github progress bar dynamic jigx title safari description this jig shows how the progress bar dynamically updates when the list items are checked the error and helpertext update dynamically according to the progress made type jig default header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1534476478164 b15fec4f091c?ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtl8fhnhzmfyaxxlbnwwfhwwfhx8ma%3d%3d\&auto=format\&fit=crop\&w=500\&q=60 datasources checkbox list type datasource static options data \ id 1 title binoculars icon binocular \ id 2 title shoes for safari hike/walk icon footwear boots \ id 3 title mosquito repellent icon flying insect fly \ id 4 title swimwear icon swimming goggles \ id 5 title hat icon hat \ id 6 title sunscreen icon sunbathe children \ type component progress bar options value current =$count(@ctx components packlist state selected) max =$count(@ctx datasources checkbox list) steps =$count(@ctx datasources checkbox list) size large errortext =$count(@ctx components packlist state selected) = 6 ? '' 'get packing!' helpertext =$count(@ctx components packlist state selected) = 6 ? 'all packed and ready to go' '' color color2 title value are you ready? \ type component section options title packing list children \ type component list instanceid packlist options maximumitemstorender =$count(@ctx datasources checkbox list) data =@ctx datasources checkbox list item type component list item options divider transparent title =@ctx current item title value =@ctx solution state activeitemid rightelement element checkbox value =@ctx current item id = true ? true \ false leftelement element icon icon =@ctx current item icon onpress type action set state options state =@ctx solution state activeitemid value =@ctx current state checked