gistfile1.js

// ==UserScript==
// @name ldr-view-progress
// @namespace http://basyura.org
// @include http://reader.livedoor.com/reader/
// ==/UserScript==
//
const ONE_HOUR   = 60 * 60 * 1000;
const ONE_MINUTE = 60 * 1000;

const TIMER = 10000;
const MAX   = 3 * ONE_HOUR;

function expand_progress() {
	let progress = document.getElementById("view_progress");
	if(progress == undefined) {
    	progress = document.createElement('div');
		progress.style.paddingLeft     = '5px';
		progress.style.border   = '3px double #ffffff';
		progress.style.color    = '#ffffff';
		progress.style.fontSize = '10px';
		progress.style.height   = '20px';
		progress.style.position = 'absolute';
		progress.style.top      = 0;
		document.body.appendChild(progress);
	}
	let period  = GM_getValue('view_progress_period') + TIMER;
	let percent = (period / MAX) * 100; 

	if(percent < 50) {
		progress.style.backgroundColor = '#6d9bff';
	}
	else if(percent < 70) {
		progress.style.backgroundColor = 'orange';
	}
	else {
		progress.style.backgroundColor = 'red';
	}

	let width   = percent.toString() + '%';
	progress.style.width = width;

	let hour = parseInt(period / ONE_HOUR , 10);
	let min  = parseInt((period - hour * ONE_HOUR) / ONE_MINUTE , 10);
	let sec  = parseInt((period - hour * ONE_HOUR - min * ONE_MINUTE) / 1000 , 10);
	progress.textContent = hour + "h " + min + "m " + sec + "s";

	GM_setValue('view_progress_period' , period);
}

function setUp() {
	let date  = GM_getValue("view_progress_date");
	let now   = new Date();
    let today = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
	if(date != today) {
		alert("reset");
		GM_setValue("view_progress_date"   , today);
		GM_setValue('view_progress_period' , 0);
	}
	expand_progress();
	setInterval(expand_progress , TIMER);
}
setUp();