Theme
Counter
Counter animates a numerical value by counting to it.
Basic Usage
Start Value
Count Down
Decimal Places
Separators
Locale
Prefix Suffix
AJAX and Events
Source

                <h:panelGrid columns="2" columnClasses="normal, bold">
        <h:outputText value="Basic Usage"/>
        <pe:counter end="9000" separator=""/>
        <h:outputText value="Start Value"/>
        <pe:counter end="9000" start="1000"/>
        <h:outputText value="Count Down"/>
        <pe:counter start="9000" end="1000"/>
        <h:outputText value="Decimal Places"/>
        <pe:counter end="9000" decimals="2"/>
        <h:outputText value="Separators"/>
        <pe:counter end="9000" decimals="2" separator="." decimal=","/>
        <h:outputText value="Locale"/>
        <pe:counter end="9000" locale="fr_FR" decimals="2"/>
        <h:outputText value="Prefix Suffix"/>
        <pe:counter end="9000" prefix="USD " suffix=" $" style="background-color:black;color:MediumSeaGreen;"/>
        <h:outputText value="AJAX and Events"/>
        <pe:counter start="0" end="9000" duration="5" onstart="console.log('STARTED')" onend="console.log('ENDED')" autoStart="true">
            <p:ajax event="start" listener="#{counterController.startListener}"/>
            <p:ajax event="end" listener="#{counterController.endListener}"/>
        </pe:counter>
    </h:panelGrid>
            
Components and more
Use Cases
Documentation pe:counter
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
widgetVar Name of the client side widget.
style Style of the main container element. Default value is null.
styleClass Style class of the main container element. Default value is null.
start Number to start at. Default is 0.
end The value you want to arrive at.
decimals Number of decimal places. Default is 0.
duration Animation duration in seconds. Default is 2.
useGrouping Example: 1,000 vs 1000. Default is true.
useEasing Ease animation. Default is true.
smartEasingThreshold Smooth easing for large numbers above this if useEasing. Default is 999.
smartEasingAmount Amount to be eased for numbers above threshold. Default is 333.
locale String or java.util.Locale representing user locale. Default is a locale specified in view root.
separator Grouping separator. Default is your locale's default.
decimal Decimal separator. Default is your locale's default.
prefix Text prepended to result.
suffix Text appended to result.
autoStart In autoStart mode, the counter will start immediately. Default is true.
visible Set to false to hide the counter. The listener will be fired anyway. Default is true.
onstart Javascript handler executed the counter starts.
onend Javascript handler executed the counter stops.
Events (move mouse over the names to see classes)
Name Description
startfires when the counter is started
endfires when the counter is stopped
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 10.0.0,PrimeFaces Extensions: 10.0.5,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-08-28 16:46
occured!