Docs Menu

Progress Bars

Progress Bars have the following properties which are optional:

Property Required? Type Options Description
completion yes int 0-100 Percentage of the Progress Bar that is represented as complete.
height no int Height of the Progress Bar.
innerBarBg no string
  • null (default)
  • warning
  • success
  • info
  • notice
 Background color of the inner Progress bar (completion bar)
type no bool
  • null (default)
  • warning
  • success
  • info
  • notice
 The color theme of the Progress Bar.

Basic Examples
Basic Progress Bar example. 

            
1<x-fcui-progress-bar completion="70" height="4"/>

Advanced Example
Progress bar with the warning type, and an inner bar background specified. 

            
1<x-fcui-progress-bar type="warning" completion="94" innerBarBg="warning" height="8" />