HTML5でプログレスバーを使ってカウントダウン、カウントアップをする方法

Ⅰ. はじめに

タイトルの通り「HTML5でプログレスバーを使ってカウントダウン、カウントアップをする」方法です。
progress要素とoutput要素はHTML5で導入されました。

よって、HTML5以降のみで動作します。

Ⅱ. サンプル

1. 10秒カウントダウン

codepen.io

2. 10秒カウントアップ

codepen.io