Sebb767/loadingscreen.html

## loadingscreen.html
<!DOCTYPE html>
<html lang="en">
  <!--

  This is a demo for a CSS 3 animated loading page with dots.

  You're free to use this however you want, but I'd be happy if you add a link to sebb767.de ;)

  -->

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* centering the dots */
        #outer-container {
            text-align: center;
            display: table;
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #middle-container {
            display: table-cell;
            vertical-align: middle;
        }

        /* dots */

        .dot-container {
            margin: 0 auto;
        }

        .dot-container .header {
            font-size: 3em;
            color: #1a1a1a;
            display: block;
        }

        .dot-container .dot {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            background-color: #1a1a1a;
            display: inline-block;
            margin: 20px;

            animation:fade 3s infinite;
        }

        .dot-2 {
            animation-delay: 1s !important;
        }

        .dot-3 {
            animation-delay: 2s !important;
        }

        @keyframes fade {
            0% {opacity:1;}
            5% {opacity:1;}
            50% {opacity:0.2;}
            95% {opacity:1;}
            100% {opacity:1;}
        }
    </style>
</head>
<body>

    <div id="outer-container">
        <div id="middle-container">

            <div class="dot-container">
                <span class="header">Loading</span>
                <div class="dots">
                    <div class="dot"></div>
                    <div class="dot dot-2"></div>
                    <div class="dot dot-3"></div>
                </div>
            </div>

        </div>
    </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<!--

	This is a demo for a CSS 3 animated loading page with dots.

	You're free to use this however you want, but I'd be happy if you add a link to sebb767.de ;)

	-->

	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	/* centering the dots */
	#outer-container {
	text-align: center;
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	}

	#middle-container {
	display: table-cell;
	vertical-align: middle;
	}

	/* dots */

	.dot-container {
	margin: 0 auto;
	}

	.dot-container .header {
	font-size: 3em;
	color: #1a1a1a;
	display: block;
	}

	.dot-container .dot {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background-color: #1a1a1a;
	display: inline-block;
	margin: 20px;

	animation:fade 3s infinite;
	}

	.dot-2 {
	animation-delay: 1s !important;
	}

	.dot-3 {
	animation-delay: 2s !important;
	}

	@keyframes fade {
	0% {opacity:1;}
	5% {opacity:1;}
	50% {opacity:0.2;}
	95% {opacity:1;}
	100% {opacity:1;}
	}
	</style>
	</head>
	<body>

	<div id="outer-container">
	<div id="middle-container">

	<div class="dot-container">
	<span class="header">Loading</span>
	<div class="dots">
	<div class="dot"></div>
	<div class="dot dot-2"></div>
	<div class="dot dot-3"></div>
	</div>
	</div>

	</div>
	</div>

	</body>
	</html>