HTML
<div class='imac'>
<div class='imac-screen'>
<div class='display'>
<div class="booting-loader">
<div class="logo">
<i class="fa fa-apple" aria-hidden="true"></i>
</div>
<div class="booting-bar">
<div id="booting">
</div>
</div>
</div>
<div class="dock">
<div class="apps">
<div class="app-one"></div>
<div class="app-two"></div>
<div class="app-three"></div>
<div class="app-four"></div>
<div class="app-five"></div>
<div class="app-six"></div>
</div>
</div>
</div>
<div class="display-bottom"></div>
</div>
<div class='imac-stand'></div>
<div class='imac-bottom-stand'></div>
</div>
CSS
/*
=================================
Basic Stuff
=================================
*/
html,
body {
background: rgba(117,189,209,1);
background: linear-gradient(45deg,
rgba(117,189,209,1) 0%,
rgba(117,189,209,1) 11%,
rgba(117,189,209,1) 16%,
rgba(117,189,209,1) 16%,
rgba(0,91,154,1) 98%,
rgba(0,91,154,1) 100%);
width: 100%;
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
/*
=================================
iMac
=================================
*/
/* Screen */
.imac-screen {
width: 560px;
height: 350px;
box-sizing: border-box;
border-radius: 12px;
}
/* Display */
.display {
position: relative;
width: 100%;
height: 300px;
border: 20px solid;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
box-sizing: border-box;
background: url('http://goo.gl/ciIqKe') no-repeat center;
background-size: cover;
}
.display-bottom {
background-color: #F6F7F8;
width: 100%;
height: 50px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Dock */
.dock {
position: absolute;
bottom: 0;
left: 30%;
width: 200px;
height: 30px;
background: rgba(221, 221, 221, 0.7);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.apps {
display: flex;
display: flex;
justify-content: space-around;
margin-top: 6px;
}
.apps div {
width: 20px;
height: 20px;
border-radius: 50%;
}
/* App Colors */
.app-one { background: #2980b9 }
.app-two { background: #9b59b6 }
.app-three { background: #34495e }
.app-four { background: #e74c3c }
.app-five { background: #27ae60 }
.app-six { background: #ecf0f1 }
/* iMac Stand */
.imac-stand {
width: 120px;
height: 55px;
margin: 0 auto;
background-color: #d1d1d1;
}
.imac-bottom-stand {
background-color: #F6F7F8;
width: 160px;
height: 19px;
border: 1px solid #ddd;
margin: 0 auto;
}
/*
=================================
Booting Styling
=================================
*/
.booting-loader {
background-color: #2c3134;
padding-top: 85px;
text-align: center;
z-index: 9999;
position: absolute;
width: 100%;
height: 100%;
overflow-y: hidden;
box-sizing: border-box;
}
.booting-bar {
position: relative;
width: 200px;
height: 10px;
overflow: hidden;
background-color: #252525;
border-radius: 10px;
border: 1px solid #3C3C3C;
margin: 20px auto;
}
#booting {
position: absolute;
width: 10%;
height: 100%;
background-color: #fff;
}
.logo {
font-size: 60px;
color: #fff;
}
JAVASCRIPT
$(document).ready(function() {
var booting = $("#booting");
var width = 10;
var id = setInterval(frame, 60);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
booting.css('width', width + '%');
}
}
setTimeout(function() {
$(".booting-loader").animate({
opacity: "toggle"
}, 500);
}, 6500);
});
2 Responses