Polymer component that shows time in user-defined format, with ability to act like timer

[ This description is mirrored from README.md at github.com/andrewmiroshnichenko/se-timer on 2019-05-10 ]

Published on webcomponents.org

se-timer

Shows time in certain format and ticks it

Install

$ bower install se-timer

Make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing component

$ polymer serve

Running tests

$ polymer test

API

Component have four public properties.

  1. Value
Property name value
Property type Number
Default value 0
Can be set from html Yes
Corresponding attribute value

Number of milliseconds that should be reflected in the display. Value can’t exceed 359999999(which equivalents ‘99:59:59.999’). After reaching higher value component’s ‘state‘ will be explicitly set to ‘stop’.

      <se-timer value="1234"></se-timer>
      var customEl = document.querySelector('se-timer');
      customEl.value; // returns Number 1234
      customEl.value = 10000;
      customEl.value; // returns Number 10000
     <se-timer>10:10:10</se-timer>
      var customEl = document.querySelector('se-timer');
      customEl.value; // returns Number 36610000
  1. timerStep
Property name timerStep
Property type Number
Default value 500
Can be set from html Yes
Corresponding attribute timer-step

Frequency of polling of current time and, subsequently, displayed time updating in count state. Change of this property in count state won’t take effect. New value will be applied only after state will become stop at least once after change occurred.

      <se-timer timer-step="100"></se-timer>
      var customEl = document.querySelector('se-timer');
      customEl.timerStep; // returns Number 100
      customEl.timerStep = 120;
      customEl.timerStep; // returns Number 120
  1. State
Property name state
Property type String
Default value 'stop'
Can be set from html Yes
Corresponding attribute state

State of the component. Two possible values are:

  • count. In this state value is increasing every timerStep milliseconds;
  • stop. In this state value isn’t changing.
      <se-timer></se-timer>
      var customEl = document.querySelector('se-timer');
      customEl.state; // returns String 'stop'
      customEl.state = 'count';
      customEl.state; // returns String 'count'
  1. Format
Property name format
Property type String
Default value 'hh:mm:ss'
Can be set from html Yes
Corresponding attribute format

Format of output data. Seven formats are supported:

  • hh. Displays hours (value interval from 00 to 99);
  • hh:mm. Displays hours (value interval from 00 to 99) and minutes (value interval from 00 to 59);
  • hh:mm:ss. Displays hours (value interval from 00 to 99), minutes (value interval from 00 to 59) and seconds (value interval from 00 to 59);
  • hh:mm:ss.ms. Displays hours (value interval from 00 to 99), minutes (value interval from 00 to 59), seconds (value interval from 00 to 59) and milliseconds (value interval from 000 to 999);
  • mm:ss. Displays minutes (value interval from 00 to 59) and seconds (value interval from 00 to 59);
  • mm:ss.ms. Displays minutes (value interval from 00 to 59), seconds (value interval from 00 to 59) and milliseconds (value interval from 000 to 999);
  • ss.ms. Displays seconds (value interval from 00 to 59) and milliseconds (value interval from 000 to 999);
      <se-timer format="hh"></se-timer>
      var customEl = document.querySelector('se-timer');
      customEl.format; // returns String 'hh'
      customEl.format = 'hh:mm:ss:ms';
      customEl.format; // returns Number 'hh:mm:ss:ms'

Styling

The following custom properties are available for styling:

Custom property Description Default
--setimer-number-color Timer digits color Browser-default(black)
--setimer-number-size Font size of timer digits. This param changes component dimensions 45px
--setimer-background-color Component's background color transparent
--setimer-font-family Font family of digits Roboto, sans-serif

Demo

Better view on webcomponentsjs.org

<se-timer value="60000" state="count" timer-step="100" format="mm:ss.ms"></se-timer>

Install

Link to this version
TestedReleased 25 July 2017Apache License 2.0
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.2

Dependencies

Polymer/polymer#^2.0.0-rc.2