	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

Counter

Counter animates a numerical value by counting to it. Based on CountUp.js by inorganik.

Counter Tag Documentation

Counter animates a number from a start value to an end value.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
autoStart	boolean	false	true	Whether to start the counter automatically.
decimal	String	false		Decimal separator character.
decimals	Integer	false	0	Number of decimal places.
duration	Integer	false	2	Animation duration in seconds.
end	Double	true		Ending value for the counter.
locale	Object	false		Locale for number formatting. Can be a string or java.util.Locale instance.
onend	String	false		Client-side callback when the counter animation ends.
onstart	String	false		Client-side callback when the counter animation starts.
prefix	String	false		Text to display before the number.
separator	String	false		Thousands grouping separator character.
smartEasingAmount	Integer	false	333	Amount for smart easing.
smartEasingThreshold	Integer	false	999	Threshold for smart easing.
start	Double	false	0.0	Starting value for the counter.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
suffix	String	false		Text to display after the number.
useEasing	boolean	false	true	Whether to use easing in the animation.
useGrouping	boolean	false	true	Whether to use grouping separators (e.g. 1,000).
visible	boolean	false	true	Whether the component is initially visible.

Name	Description
No records found.

Name	Type	Default	Description
start	SelectEvent	false	Fires when the counter animation starts.
end	SelectEvent	true	Fires when the counter animation ends.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces
counter/counter.js	primefaces-extensions

RESOURCES

Tag Documentation Widget Source

Basic Usage

Start value, count down, decimals, separators, locale, prefix and suffix. The last counter fires the AJAX events start and end.

Usage


<style>
    .counter-label {
        font-weight: bold;
    }
</style>

<div class="card">
    <h5>Basic Usage</h5>
    <p>Start value, count down, decimals, separators, locale, prefix and suffix. The last counter fires the AJAX events <i>start</i> and <i>end</i>.</p>
    <h:form id="formBasicUsage">
        <p:messages id="messages" showSummary="true" showDetail="true">
            <p:autoUpdate/>
        </p:messages>

        <h:panelGrid columns="2" columnClasses="normal, counter-label" cellpadding="4">
            <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>
    </h:form>
</div>


package org.primefaces.extensions.showcase.controller;

import java.io.Serial;
import java.io.Serializable;

import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

import org.primefaces.event.SelectEvent;

/**
 * Counter Controller.
 *
 * @author Melloware [email protected]
 */
@Named
@ViewScoped
public class CounterController implements Serializable {

    @Serial
    private static final long serialVersionUID = 20120224L;

    public void startListener(final SelectEvent<Double> event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Start fired",
                    "Value: " + event.getObject());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void endListener(final SelectEvent<Double> event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_WARN, "End fired",
                    "Value: " + event.getObject());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

}

Basic Usage
Start Value
Count Down
Decimal Places
Separators
Locale
Prefix Suffix
AJAX and Events

Counter

Counter Tag Documentation

Basic Usage

Usage

Reloading page