countdownbar

A countdown bar library for web app.

• Release Notes.

Features

• Support for custom templates and styles.
• Support typescript.

Installation

# pnpm
$ pnpm add countdownbar

# yarn
$ yarn add countdownbar

# npm
$ npm i countdownbar

Usage

1. Define a container.

<div id="countdown-bar-container"></div>

2. Creates a countdown bar instance.

import { createCountdownBar } from 'countdownbar'

const countdownBarInstance = createCountdownBar({
  container: '#countdown-bar-container',
  time: 24 * 60 * 60 * 1000,
  onFinish() {
    // do something when finished.
  }
})

Options

Prop	Type	Default Value	Description
container	string, HTMLElement	-	Define a container for countdown bar.
time	number	0	Total time, unit milliseconds
autoStart	boolean	true	Whether to auto start count down
millisecond	boolean	false	Whether to enable millisecond render
color	string	#323233	Define color of countdown.
fontSize	string	14px	Define font-size of countdown.
template	Function	-	Custom the template of countdown bar. (current: CurrentTime) => string
onChange	Function	-	Emitted when count down changed. (current: CurrentTime) => void
onFinish	Function	-	Emitted when count down finished. () => void

CurrentTime Structure

Name	Description	Type
total	Total time, unit milliseconds	number
days	Remain days	number
hours	Remain hours	number
minutes	Remain minutes	number
seconds	Remain seconds	number
milliseconds	Remain milliseconds	number

APIs

Methods of instance

start

Start count down.

countdownBarInstance.start()

pause

Pause count down.

countdownBarInstance.pause()

reset

Reset count down. Accept a new time as first param, defaults is options.time.

countdownBarInstance.reset()