https://github.com/alfalabs/alfa-clock
non-ticking clock animated in CSS
https://github.com/alfalabs/alfa-clock
polymer-components polymer2
Last synced: 3 months ago
JSON representation
non-ticking clock animated in CSS
- Host: GitHub
- URL: https://github.com/alfalabs/alfa-clock
- Owner: alfalabs
- License: mit
- Created: 2018-06-06T21:47:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-08T15:48:47.000Z (almost 8 years ago)
- Last Synced: 2026-01-23T08:38:40.690Z (4 months ago)
- Topics: polymer-components, polymer2
- Language: HTML
- Homepage:
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/alfalabs/alfa-clock)
# alfa-clock
Polymer web component to display a clock.
## use example:
```html
alfa-clock {float: left;}
alfa-clock.red{
--seconds-color: red;
--ring-css: 6px solid red;
--hands-color: darkred;
--shadow-color: none;
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);
}
alfa-clock.bigger{ --size: 400px; --brand-font: 2em Arial}
```
## CSS API
|variable|default|descr|
|---|---|---|
|--size:| 250px;|clock diameter|
|--seconds-color:| lime;|seconds hand color|
|--hands-color: |white;|other hands color|
|--shadow-color: |black;|other hands shadow|
|-ring-css:| 2px solid silver;|css for a ring around the clock face|
|--brand-font:| 1em Arial, Helvetica, sans-serif;| css font for a branding text on clock face|
|--brand-color: |grey; | NOTE: SVG filter will change this color |
|--face-filter: |none; | to color an SVG face|
## face-filter
The clock face is made with SVG image containing numbers for hours.
To change the color of SVG, a CSS `filter` is applied.
`--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);`
Try to manipulate `saturation` and `hue-rotate` to achieve desired color. It is hard, but blame the CSS committee.
Examples of colors:
```css
--face-filter: invert(1); /* black */
--face-filter: invert(.5) sepia(1) saturate(5) hue-rotate(60deg); /* green */
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); /* red */
```
## single page applications
This clock is based on CSS animations. When a page is loosing "focus" the CSS animation stops. When the page with clock is reopened, the clock resunmes animations and is late!
To avoid this, run
`this.$$('alfa-clock').start();`
each time the containing page is reopened.