keenwon/loadingbar.html

## loadingbar.html
<!doctype html>
<html lang="zh-CN">
<head>
    <title>Loading bar</title>
    <meta charset="utf-8">
    <style type="text/css">
        .loadingbar {
            position: fixed;
            z-index: 2147483647;
            top: 0;
            left: -6px;
            width: 0;
            height: 2px;
            background: #b91f1f;
            -moz-border-radius: 1px;
            -webkit-border-radius: 1px;
            border-radius: 1px;
            -moz-transition: opacity 500ms ease-in-out;
            -ms-transition: opacity 500ms ease-in-out;
            -o-transition: opacity 500ms ease-in-out;
            -webkit-transition: opacity 500ms ease-in-out;
            transition: opacity 500ms ease-in-out;
        }

        .loadingbar.waiting {
            width: 0;
            -moz-animation: move 10s linear forwards;
            -ms-animation: move 10s linear forwards;
            -o-animation: move 10s linear forwards;
            -webkit-animation: move 10s linear forwards;
            animation: move 10s linear forwards;
        }

        @keyframes move {
            0% { width: 0; }
            100% { width: 30%; }
        }

        @-moz-keyframes move {
            0% { width: 0; }
            100% { width: 30%; }
        }

        @-ms-keyframes move {
            0% { width: 0; }
            100% { width: 30%; }
        }

        @-webkit-keyframes move {
            0% { width: 0; }
            100% { width: 30%; }
        }

        .loadingbar.end {
            width: 30%;
            -moz-animation: end .5s linear forwards;
            -ms-animation: end .5s linear forwards;
            -o-animation: end .5s linear forwards;
            -webkit-animation: end .5s linear forwards;
            animation: end .5s linear forwards;
        }

        @keyframes end {
            70% { width: 100%; opacity: 1 }
            100% { width: 120%; opacity: 0; }
        }

        @-moz-keyframes end {
            70% { width: 100%; opacity: 1 }
            100% { width: 120%; opacity: 0; }
        }

        @-ms-keyframes end {
            70% { width: 100%; opacity: 1 }
            100% { width: 120%; opacity: 0; }
        }

        @-webkit-keyframes end {
            70% { width: 100%; opacity: 1 }
            100% { width: 120%; opacity: 0; }
        }

        .loadingbar.waiting dd, .loadingbar.waiting dt {
            -moz-animation: pulse 1.5s ease-out 1.8s infinite;
            -ms-animation: pulse 1.5s ease-out 1.8s infinite;
            -o-animation: pulse 1.5s ease-out 1.8s infinite;
            -webkit-animation: pulse 1.5s ease-out 1.8s infinite;
            animation: pulse 1.5s ease-out 1.8s infinite;
        }

        .loadingbar dt {
            opacity: .6;
            width: 180px;
            right: -80px;
            clip: rect(-6px,90px,14px,-6px);
        }

        .loadingbar dd {
            opacity: .6;
            width: 20px;
            right: 0;
            clip: rect(-6px,22px,14px,10px);
        }

        .loadingbar dd, .loadingbar dt {
            position: absolute;
            top: 0;
            height: 2px;
            -moz-box-shadow: #b91f1f 1px 0 6px 1px;
            -ms-box-shadow: #b91f1f 1px 0 6px 1px;
            -webkit-box-shadow: #B91F1F 1px 0 6px 1px;
            box-shadow: #B91F1F 1px 0 6px 1px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
        }

        @keyframes pulse {
            30% { opacity: 0.6; }
            60% { opacity: 0; }
            100% { opacity: 0.6; }
        }

        @-moz-keyframes pulse {
            30% { opacity: 0.6; }
            60% { opacity: 0; }
            100% { opacity: 0.6; }
        }

        @-ms-keyframes pulse {
            30% { opacity: 0.6; }
            60% { opacity: 0; }
            100% { opacity: 0.6; }
        }

        @-webkit-keyframes pulse {
            30% { opacity: 0.6; }
            60% { opacity: 0; }
            100% { opacity: 0.6; }
        }
    </style>
</head>
<body>
    <div class="loadingbar">
        <dt></dt>
        <dd></dd>
    </div>
    <div style="margin: 30px;">
        <button id="start">start</button>
        <button id="end">end</button>
        <button id="reset">reset</button>
        <button id="simulate1">模拟 500ms</button>
        <button id="simulate2">模拟 1s</button>
        <button id="simulate3">模拟 2s</button>
        <button id="simulate4">模拟 10s</button>
    </div>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $loadingbar = $('.loadingbar'),
                $startBtn = $('#start'),
                $endBtn = $('#end'),
                $resetBtn = $('#reset'),
                $simulate1Btn = $('#simulate1'),
                $simulate2Btn = $('#simulate2'),
                $simulate3Btn = $('#simulate3'),
                $simulate4Btn = $('#simulate4'),
                timer;

            function reset() {
                $loadingbar.removeClass('waiting end');
            }

            function start() {
                $loadingbar.addClass('waiting');
            }

            function end() {
                $loadingbar.removeClass('waiting').addClass('end');
            }

            function simulate(delay) {
                reset();
                start(),
                clearTimeout(timer);
                timer = setTimeout(function () {
                    end();
                }, delay);
            }

            $resetBtn.on('click', reset);

            $startBtn.on('click', start);

            $endBtn.on('click', end);

            $simulate1Btn.on('click', function () {
                simulate(500);
            });

            $simulate2Btn.on('click', function () {
                simulate(1000);
            });

            $simulate3Btn.on('click', function () {
                simulate(2000);
            });

            $simulate4Btn.on('click', function () {
                simulate(10000);
            });
        });
    </script>
</body>
</html>
	<!doctype html>
	<html lang="zh-CN">
	<head>
	<title>Loading bar</title>
	<meta charset="utf-8">
	<style type="text/css">
	.loadingbar {
	position: fixed;
	z-index: 2147483647;
	top: 0;
	left: -6px;
	width: 0;
	height: 2px;
	background: #b91f1f;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	-moz-transition: opacity 500ms ease-in-out;
	-ms-transition: opacity 500ms ease-in-out;
	-o-transition: opacity 500ms ease-in-out;
	-webkit-transition: opacity 500ms ease-in-out;
	transition: opacity 500ms ease-in-out;
	}

	.loadingbar.waiting {
	width: 0;
	-moz-animation: move 10s linear forwards;
	-ms-animation: move 10s linear forwards;
	-o-animation: move 10s linear forwards;
	-webkit-animation: move 10s linear forwards;
	animation: move 10s linear forwards;
	}

	@keyframes move {
	0% { width: 0; }
	100% { width: 30%; }
	}

	@-moz-keyframes move {
	0% { width: 0; }
	100% { width: 30%; }
	}

	@-ms-keyframes move {
	0% { width: 0; }
	100% { width: 30%; }
	}

	@-webkit-keyframes move {
	0% { width: 0; }
	100% { width: 30%; }
	}

	.loadingbar.end {
	width: 30%;
	-moz-animation: end .5s linear forwards;
	-ms-animation: end .5s linear forwards;
	-o-animation: end .5s linear forwards;
	-webkit-animation: end .5s linear forwards;
	animation: end .5s linear forwards;
	}

	@keyframes end {
	70% { width: 100%; opacity: 1 }
	100% { width: 120%; opacity: 0; }
	}

	@-moz-keyframes end {
	70% { width: 100%; opacity: 1 }
	100% { width: 120%; opacity: 0; }
	}

	@-ms-keyframes end {
	70% { width: 100%; opacity: 1 }
	100% { width: 120%; opacity: 0; }
	}

	@-webkit-keyframes end {
	70% { width: 100%; opacity: 1 }
	100% { width: 120%; opacity: 0; }
	}

	.loadingbar.waiting dd, .loadingbar.waiting dt {
	-moz-animation: pulse 1.5s ease-out 1.8s infinite;
	-ms-animation: pulse 1.5s ease-out 1.8s infinite;
	-o-animation: pulse 1.5s ease-out 1.8s infinite;
	-webkit-animation: pulse 1.5s ease-out 1.8s infinite;
	animation: pulse 1.5s ease-out 1.8s infinite;
	}

	.loadingbar dt {
	opacity: .6;
	width: 180px;
	right: -80px;
	clip: rect(-6px,90px,14px,-6px);
	}

	.loadingbar dd {
	opacity: .6;
	width: 20px;
	right: 0;
	clip: rect(-6px,22px,14px,10px);
	}

	.loadingbar dd, .loadingbar dt {
	position: absolute;
	top: 0;
	height: 2px;
	-moz-box-shadow: #b91f1f 1px 0 6px 1px;
	-ms-box-shadow: #b91f1f 1px 0 6px 1px;
	-webkit-box-shadow: #B91F1F 1px 0 6px 1px;
	box-shadow: #B91F1F 1px 0 6px 1px;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	}

	@keyframes pulse {
	30% { opacity: 0.6; }
	60% { opacity: 0; }
	100% { opacity: 0.6; }
	}

	@-moz-keyframes pulse {
	30% { opacity: 0.6; }
	60% { opacity: 0; }
	100% { opacity: 0.6; }
	}

	@-ms-keyframes pulse {
	30% { opacity: 0.6; }
	60% { opacity: 0; }
	100% { opacity: 0.6; }
	}

	@-webkit-keyframes pulse {
	30% { opacity: 0.6; }
	60% { opacity: 0; }
	100% { opacity: 0.6; }
	}
	</style>
	</head>
	<body>
	<div class="loadingbar">
	<dt></dt>
	<dd></dd>
	</div>
	<div style="margin: 30px;">
	<button id="start">start</button>
	<button id="end">end</button>
	<button id="reset">reset</button>
	<button id="simulate1">模拟 500ms</button>
	<button id="simulate2">模拟 1s</button>
	<button id="simulate3">模拟 2s</button>
	<button id="simulate4">模拟 10s</button>
	</div>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function () {
	var $loadingbar = $('.loadingbar'),
	$startBtn = $('#start'),
	$endBtn = $('#end'),
	$resetBtn = $('#reset'),
	$simulate1Btn = $('#simulate1'),
	$simulate2Btn = $('#simulate2'),
	$simulate3Btn = $('#simulate3'),
	$simulate4Btn = $('#simulate4'),
	timer;

	function reset() {
	$loadingbar.removeClass('waiting end');
	}

	function start() {
	$loadingbar.addClass('waiting');
	}

	function end() {
	$loadingbar.removeClass('waiting').addClass('end');
	}

	function simulate(delay) {
	reset();
	start(),
	clearTimeout(timer);
	timer = setTimeout(function () {
	end();
	}, delay);
	}

	$resetBtn.on('click', reset);

	$startBtn.on('click', start);

	$endBtn.on('click', end);

	$simulate1Btn.on('click', function () {
	simulate(500);
	});

	$simulate2Btn.on('click', function () {
	simulate(1000);
	});

	$simulate3Btn.on('click', function () {
	simulate(2000);
	});

	$simulate4Btn.on('click', function () {
	simulate(10000);
	});
	});
	</script>
	</body>
	</html>