Animated page preloader

HTML
<div id="preloader"> <div id="preloader--logo"> <svg id="logo--svg" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><title>logo</title><path d="M0,91C0,57.84,11.47.24,53.46,0.24c7.79,0,14.07,5,17.31,11.28L72.93,0h31.38L77.91,139.2C71.42,173.52,52.81,180,38.52,180A25.48,25.48,0,0,1,13,154.08c0-21.84,16-25.44,36.14-29.76l2.6-13c-6.49,5.76-14.93,10.08-24.89,10.08C6.06,121.44,0,105.12,0,91Zm33.54,67.68c4.55,0,10-4.56,12.77-18.72L47.83,132c-13.64,2.64-22.94,5.76-22.94,18.72C24.89,154.08,28.78,158.64,33.54,158.64ZM26.62,86.4c0,11.52,6.28,15.12,15.8,15.12,4.11,0,8.44-3.36,12.55-7.92L68.38,24c-3.46-7.2-8.87-10.32-12.55-10.32C34.84,13.68,26.62,65.76,26.62,86.4Z" style="fill:#ff324a"></path><path d="M180,89c0,33.12-11.47,90.72-53.46,90.72-7.79,0-14.07-5-17.31-11.28L107.07,180H75.69l26.4-139.2C108.58,6.48,127.2,0,141.48,0A25.48,25.48,0,0,1,167,25.92c0,21.84-16,25.44-36.14,29.76l-2.6,13c6.49-5.76,14.93-10.08,24.89-10.08C173.94,58.56,180,74.88,180,89ZM153.38,93.6c0-11.52-6.28-15.12-15.8-15.12-4.11,0-8.44,3.36-12.55,7.92L111.62,156c3.46,7.2,8.87,10.32,12.55,10.32C145.16,166.32,153.38,114.24,153.38,93.6Zm-6.92-72.24c-4.55,0-10,4.56-12.77,18.72L132.17,48c13.64-2.64,22.94-5.76,22.94-18.72C155.12,25.92,151.22,21.36,146.46,21.36Z" style="fill:#ff324a"></path> </svg> </div> </div> <article id="post"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> <h4>Donec id massa enim. Fusce vitae diam congue, hendrerit magna eu, aliquet dui. Vivamus eget tristique nisl. Curabitur maximus quam quis elit porttitor, non accumsan lectus rutrum.</h4> <p>Aliquam ultrices feugiat enim, vel luctus ex aliquam non. Aenean ut mollis massa. In vulputate, ante nec mattis tincidunt, massa nulla tincidunt diam, ac laoreet turpis sem vitae enim. Maecenas sed sollicitudin sem, sit amet tincidunt enim. Pellentesque ac enim imperdiet erat egestas lacinia at eu eros. Suspendisse consectetur interdum eros, in dapibus nibh eleifend ac. Proin et lectus est. Vestibulum venenatis quam sit amet quam rutrum egestas. Curabitur vel facilisis urna.</p> <p>Proin posuere vestibulum orci, placerat lobortis justo tincidunt quis. Vestibulum vulputate, risus vitae pretium pharetra, leo orci rhoncus nibh, ut faucibus leo orci at quam. Proin tellus lorem, volutpat sit amet porta sed, ornare a erat. Curabitur fermentum dignissim quam, sit amet lacinia diam semper auctor. Vivamus luctus tortor massa, quis imperdiet dui mattis ac. Maecenas sollicitudin mattis odio, id gravida dui ornare non. Curabitur dapibus sem vel metus pharetra tincidunt. Suspendisse justo sem, eleifend sed enim id, posuere commodo augue. Curabitur ac dictum arcu.</p> </article>
CSS
html { box-sizing: border-box; height: 100%; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #ededed; font-family: 'Montserrat', Arial, sans-serif; } #post { width: 70%; margin: 30px auto; padding: 30px; background-color: #FFF; } #preloader { position: fixed; display: table; top: 0; left: 0; height: 100%; width: 100%; background-color: #2C3E50; color: #FFF; opacity: 1; transition: opacity 0.3s ease-out; } #preloader--logo { position: absolute; height: 200px; width: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; padding: 50px; border-radius: 50%; background-color: #FFF; -webkit-animation:spin .9s ease-out 3 .1s; -moz-animation:spin .9s ease-out 3 .1s; animation:spin .9s ease-out 3 .1s; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
JAVASCRIPT
$(window).load(function() { $('#preloader').delay(3000).fadeOut('slow'); });
Expand for more options Login