https://github.com/nomeyho/countdown

An SVG countdown component for the Web
https://github.com/nomeyho/countdown

animation component countdown javascript svg web

Last synced: 13 days ago
JSON representation

An SVG countdown component for the Web

• Host: GitHub
• URL: https://github.com/nomeyho/countdown
• Owner: Nomeyho
• Created: 2020-10-10T15:02:42.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-21T20:02:12.000Z (about 4 years ago)
• Last Synced: 2024-04-23T20:05:39.148Z (7 months ago)
• Topics: animation, component, countdown, javascript, svg, web
• Language: JavaScript
• Homepage: https://nomeyho.github.io/countdown/
• Size: 630 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Countdown

> An SVG countdown component for the Web.

## Demo

[Live demo](https://nomeyho.github.io/countdown/)



    



## Install

```

npm install @nomeyho/countdown

```

## Usage

Import `countdown.js` and call `countdown(...);` with 

a reference to the parent element as first argument.

```html

    


    

    

      const container = document.getElementById('container');

      countdown(container);

    


```

## Options

```javascript

countdown(container, {

    width = 500,

    height = 500,

    color = '#888FF7',

    strokeWidth = '10px',

    onDraw = (i) => console.log(`Drawing ${i}`),

});

```

| Option | Description | Default |

|---|---|---|

| start | The countdown start value (between 10 and 0) | `10` |

| width | The canvas's width in pixels | `500` |

| height | The canva's height in pixels | `500` | 

| color | The digit's color | `'#888FF7'` |

| strokeWidth | The digit's stroke width | `'10px'` |

| onDraw | A callback function called after each digit draw | `undefined` |