Shortcodes

[intense_counter]

Description

Intense counter allows you to add an incrementing/decrementing number to the page.

Screenshots

Counter

Dialog

Counter

Attributes

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
font_colorcolor_advancedFont Coloroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
background_colorcolor_advancedBackground Coloroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
border_radiusborder_radiusBorder Radius%, em, px - examples: 25% or 10em or 20px
starttextStart Value1
endtextEnd ValueFor counting down, make end be lower than start.100
texttextHTML TextHTML text should include {0} which will be substituted with value.{0}
speedtextSpeedNumber of milliseconds between counter ticks.45
thousands_separatortextThousands Separator,
decimal_pointtextDecimal Point.
decimal_placestextDecimal PlacesThe number of decimal places to show. If not 0, then the increment value will be relative to the number of decimal places (ex. decimal places = 2, increment = 1, counter will increment .01 each time)
incrementtextIncrement AmountShould always be a positive whole number. It also is relative to the number of decimal places.1

Examples

<div style="font-size: 30px; margin-bottom: 15px;">
This is [intense_counter font_color="red" speed="300" text="<span style='font-size: 50px;'>{0}%</span>"] cool.
</div>
[intense_hr]
<div style="font-size: 30px;">
The aliens are coming in [intense_counter font_color="#fff" background_color="#000" border_radius="5px" start="1000" end="0" text="
<div style='font-size: 50px; padding: 20px; display: inline-block;'>{0}</div>
"] days.
</div>
[intense_hr]
<div style="font-size: 35px;">
[intense_icon type="dollar" color="#666" /][intense_counter font_color="primary" speed="50" start="0" end="1000000" increment="1000" text="<span style='font-weight: bold;'>{0}</span>"]
<div style="font-size: 18px;">Increase Revenue</div>
</div>
[intense_hr]
<div style="font-size: 20px;">
[intense_counter font_color="success" speed="10" start="998" end="1200" decimal_places="2" decimal_point="," thousands_separator="."]
</div>