Skip to main content

    [wppb progress=85 location=after text=”hello”]

     


    All other coding variations

    [wppb progress=50] A progress bar that is 50% complete

    [wppb progress=”50/100″] A progress bar that is 50/100 complete

    [wppb progress=”$45/$50″] A dollar value progress bar that is $45/$50 complete

    [wppb progress=110] A progress bar that has gone over 100%

    [wppb progress=150/100] A progress bar that has exceeded its goal

    [wppb progress=$125/100] A fundraising-style progress bar that has exceeded the goal

    [wppb progress=50 option=red] Displays a red progress bar

    [wppb progress=50 option=”animated-candystripe green”] Displays a green progress bar with an animated candystripe

    [wppb progress=50 option=”candystripe orange”] Displays an orange progress bar with a static candystripe

    [wppb progress=50 option=candystripe] Displays a default progress bar (blue) with a static candystripe

    [wppb progress=50 option=flat color=red] Displays a red progress bar with no inner shadow or gradient

    [wppb progress=50 option=”flat candystripe” color=gray] Displays a gray progress bar with no inner shadow or gradient and a static candystripe

    [wppb progress=50 option=red location=after] Displays a red progress bar with the progress displayed to the right of the progress bar.

    [wppb progress=50 option=”red candystripe” location=inside] Displays a red progress bar with a static candystripe and the progress displayed inside the progress bar.

    [wppb progress=85 location=after text=”foo”] Displays a progress bar with the text “foo” displayed after the progress bar.

    [wppb progress=75 text=”My awesome text”] Displays “My awesome text” inside a 75% progress bar.

    [wppb progress=85 location=after text=”foo”] Displays “foo” after an 85% progress bar

    [wppb progress=85 location=inside text=”hello!”] Displays “hello!” inside an 85% progress bar (note, default location for text is inside, so it isn’t required to specify “inside”).

    [wppb progress=50 fullwidth=true] Displays a full-width (responsive) progress bar

    [wppb progress=50 fullwidth=foo] Identical to the above progress bar

    [wppb progress=50 color=rgb(123,50,87)] [wppb progress=55 color=rgba(123,64,99,0.3)] [wppb progress=22 color=#ff3257] [wppb progress=68 color=lightYellow] [wppb progress=72 color=turquoise endcolor=teal] [wppb progress=83 color=#ff2222 endcolor=#ff9984] [wppb progress=50 color=rgb(203,96,179) endcolor=rgb(173,18,131)] [wppb progress=22 color=#ff0000 gradient=0.2] Displays a red progress bar that gets lighter at the bottom

    [wppb progress=22 color=#ff0000 gradient=-0.2] Displays a red progress bar that gets darker at the bottom

    Skip to content