Skip to main content

Counter

When you want to display a number with a bit more flair than usual.

£ in bank account
<blaze-counter
  class="u-super u-text--mono"
  auto-start
  start-value="120"
  end-value="0"
  duration="10"
  decimals="2"
  delay="2000">
  <span slot="prefix">&pound;</span>
  <span slot="suffix" class="u-text--quiet u-xsmall"> in bank account</span>
</blaze-counter>

Attributes

NameDescription
auto-start: booleanAutomatically start the counter
start-value: numberThe initial value of the counter
end-value: numberThe value the counter will end on
duration: number (seconds)The time in seconds the counter will take to go from start to value
delay: number (millisecond)How long the counter will wait before starting
decimals: numberNumber of decimal places to display

Methods

NameDescription
start(): voidStarts the counter taking the delay into account
reset(): voidResets the display to the initial start value
restart(): voidWill reset the display and it will immediately start the counter again
pauseResume(): voidPause or resume the counter
update(value: number): voidChanges the value and automatically starts the counter

Events

NameDescription
completed: voidTrigged when the counter has finished