Beautiful CSS3 loading animation overlay with custom message

Nick Russler

I recently stumbled over a beautiful loading animation that is completely done in CSS3 (link):

Loader Animation GIF

All i had to do was fixing a small bug (link), adding some JavaScript and adding an semi-transparent overlay, so all credits go to Hugo Giraudel.

I centered the loading animation div and added a field to display a text message.

To allow for easy display and hiding i cooked up some JavaScript that shows the overlay and puts the text message (or a default message) in the right place.

Demo:
link

The Code:

<style>
#loadinganimation-container {
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.85);
	z-index: 1000;
	cursor: progress;
}
 
#loadinganimation-container .bokeh {
	font-size: 130px;
	width: 1em;
	height: 1em;
	position: relative;
 
	border-radius: 50%;
	border: .01em solid rgba(150,150,150,0.1);
	list-style: none;
	box-sizing: border-box;
 
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -65px 0 0 -65px;
}
 
#loadinganimation-container .loading-message {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: 80px;
	text-align: center;
	font-size: 20px;
}
 
#loadinganimation-container .bokeh li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%;
}
 
#loadinganimation-container .bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #00C176;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
}
 
#loadinganimation-container .bokeh li:nth-child(2) {
    top: 50%; 
    right: 0;
    margin: -.1em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
}
 
#loadinganimation-container .bokeh li:nth-child(3) {
    left: 50%; 
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
}
 
#loadinganimation-container .bokeh li:nth-child(4) {
    top: 50%; 
    left: 0;
    margin: -.1em 0 0 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
}
 
@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg); }
}
 
@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}
 
@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}
 
@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}
 
@keyframes rota {
    to { transform: rotate(360deg); }
}
 
@-webkit-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
 
@-moz-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
 
@-ms-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
 
@-o-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
 
@keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
</style>
 
<div id="loadinganimation-container" style="display: none;">
		<ul class="bokeh">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
 
		<div class="loading-message" data-default="Your request is being processed.." />
</div>
 
<script type="text/javascript">
function showLoadingAnimation(customMessage) {
	var container = document.getElementById('loadinganimation-container');
	var bokeh_text = container.childNodes[3];
 
	if (!customMessage) {
		customMessage = bokeh_text.dataset.default;
	}
 
	bokeh_text.innerHTML = customMessage;
 
	document.getElementById('loadinganimation-container').style.display = "block";
}
 
function hideLoadingAnimation() {
	document.getElementById('loadinganimation-container').style.display = "none";
}
</script>

No related posts.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.