caribou-timer | Vaadin

caribou-timer is a timer element, built using Polymer

[ This description is mirrored from at on 2019-05-10 ]

Published on


<caribou-timer> is a Polymer 2 element used to display a timer (Android style)

This element allow you to set a default time. This time can be edited with the plus and minus button. Or if the attribute 'input-time' is added, it can be edited with the keyboard and the arrow key.

A maximum and minimum limit can be set Moreover you can set the 'remaining-time' property. If set this property will automatically start the timer, a the specific point according to the whole-time value Example: '

Styling The following custom properties and mixins are available for styling:

Custom property Description Default
--editable-text-color Time color on the editable field (inputTime=true) #64B5F6
--editable-text-color-disabled Time color on the editable field disabled (inputTime=true) #64B5F6
--non-editable-text-color Time color on the non editable field (inputTime=false) #64B5F6
--time-button-color Plus and minus button color #64B5F6
--time-button-color-disabled Disabled plus and disabled minus button color #64B5F6
--time-button-color-hover Plus and minus button color hover #64B5F6
--circle-line-passed-color Color of the passed circle line #64B5F6
--circle-line-remaining-color Color of the remaining circle line #64B5F6
--circle-line-endpoint-fill-color Fill color or the little circle at the edge of the progression line #64B5F6
--circle-line-endpoint-stroke-color Stroke color or the little circle at the edge of the progression line #64B5F6
--button-start-color Button start color #64B5F6
--button-pause-color Button pause color #64B5F6
--button-start-color-hover Button start color on hover #64B5F6
--button-pause-color-hover Button pause color on hover #64B5F6


<caribou-timer input-time whole-time="60" max-time-limit="3600" min-time-limit="30"></caribou-timer>


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Running tests from the command line

When in the caribou-timer directory, run polymer test


Apache License 2.0


Link to this version
ImportedReleased 08 January 2018Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.0



  • PolymerElements/iron-input#^2.0.1
  • PolymerElements/paper-icon-button#^2.0.1
  • PolymerElements/iron-iconset-svg#^2.1.0