iMac Booting

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); });
Expand for more options Login