HTML,CSS,jQueryでタイムタイマーを作る方法

こんにちはtonです。

Web画面上で[タイムタイマー]を作っていきます。

そもそもタイムタイマーというのは以下のようなものです。色で直感的に残り時間がわかります。

Javascriptライブラリを探したのですが、ちょうど良いものが無かったので実際に作ってみました。出来上がりイメージはこちら。gifなので少しカクカクして見えますが実際はもっとスムーズに動きます

作成方法を以降で説明します。