Apple OS X Style Pure CSS Loading

Hi, friends in this tutorial I show you how to create a pure CSS loading with Fullscreen overlay inspired by Apples’s OS X. Using CSS we create loader animation and based on one class the styles are written. Using keyframes and percentage(%) we complete the loader. For browser compatibility, the following CSS are helpful to use google chrome (webkit), mozilla (moz) & opera (o).

apple_loading.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_10</title>
<style>
body {
 background: #111 url("apple.png");
 background-size: 25vmin;
 background-repeat: no-repeat;
 background-position: center 40%;
 height: 100vh;
 margin: 0;
}
.loading {
 width: 400px;
 max-width: 85vw;
 height: 4px;
 position: absolute;
 bottom: 20vh;
 left: 50%;
 border-radius: 4px;
 background: rgba(255,255,255,0.5);
 transform: translate(-50%, -50%);
 overflow: hidden;
}
.loading:after {
 content: '';
 display: block;
 width: 100%;
 height: 4px;
 background: #fff;
 animation: load 15s linear;
}
@-moz-keyframes load {
 0% {
 width: 0;
 }
 10% {
 width: 5%;
 }
 20% {
 width: 15%;
 }
 30% {
 width: 25%;
 }
 40% {
 width: 30%;
 }
 50% {
 width: 44%;
 }
 60% {
 width: 50%;
 }
 70% {
 width: 72%;
 }
 80% {
 width: 84%;
 }
 90% {
 width: 92%;
 }
 100% {
 width: 100%;
 }
}
@-webkit-keyframes load {
 0% {
 width: 0;
 }
 10% {
 width: 5%;
 }
 20% {
 width: 15%;
 }
 30% {
 width: 25%;
 }
 40% {
 width: 30%;
 }
 50% {
 width: 44%;
 }
 60% {
 width: 50%;
 }
 70% {
 width: 72%;
 }
 80% {
 width: 84%;
 }
 90% {
 width: 92%;
 }
 100% {
 width: 100%;
 }
}
@-o-keyframes load {
 0% {
 width: 0;
 }
 10% {
 width: 5%;
 }
 20% {
 width: 15%;
 }
 30% {
 width: 25%;
 }
 40% {
 width: 30%;
 }
 50% {
 width: 44%;
 }
 60% {
 width: 50%;
 }
 70% {
 width: 72%;
 }
 80% {
 width: 84%;
 }
 90% {
 width: 92%;
 }
 100% {
 width: 100%;
 }
}
@keyframes load {
 0% {
 width: 0;
 }
 10% {
 width: 5%;
 }
 20% {
 width: 15%;
 }
 30% {
 width: 25%;
 }
 40% {
 width: 30%;
 }
 50% {
 width: 44%;
 }
 60% {
 width: 50%;
 }
 70% {
 width: 72%;
 }
 80% {
 width: 84%;
 }
 90% {
 width: 92%;
 }
 100% {
 width: 100%;
 }
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply