CSS3 spin preloader + preload Page

In this example below you will see how to do a CSS3 spin preloader + preload Page with some HTML / CSS and Javascript

Translated to SASS (SCSS syntax)Forked from Riccardo Zanutta's Pen CSS3 spin preloader + preload Page.

Thumbnail
This awesome code was written by mavieth, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mavieth ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS3 spin preloader + preload Page</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="loader-wrapper">
  <div id="loader"></div>
  
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
  
</div>

<!--MAIN CONTENT-->
<div id="content">
<section class="bussinesscard">
		<div class="flip">
			<div class="front">				
				<div class="top">				
					<div class="logo"><span class="fat">M</span><span class="skinny">V</span></div>				
				</div>
				<div class="nametroduction">
					<div class="name">Michael Vieth</div>
					<div class="introduction">Freelance Web Developer</div>
				</div>	
				<div class="contact">						
					<div class="website">
						<span class="ion-earth"></span>
						<a href="https://michaelvieth.co">michaelvieth.co</a>
					</div>
					<div class="twitter">
						<span class="ion-social-twitter"></span>
						<a href="#">@michaelviethco</a> 
					</div>												
					<div class="phone ">
						<span class="ion-ios7-telephone"></span> 
						<a href="#">614-557-6952</a> 
					</div>
					<div class="email ">
						<span class="ion-paper-airplane"></span>
						<a href="#">mavieth@gmail.com</a>
					</div>
				</div>						
			</div>
			<div class="back"></div> <!--FIXES FONT RENDERING -->
		</div>
	</section>
	<section class="tooltip">
		<p>
			Shoot me an email for more information.
		</p>
	</section>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mavieth/css3-spin-preloader-preload-page-digcj */
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
@import url(https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);
#content {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 80%;
  max-width: 978px;
}

ul {
  list-style: square;
}
ul li a {
  text-decoration: none;
  color: #34495e;
  display: block;
  margin: 10px;
}
ul li a:hover {
  text-decoration: underline;
}

/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}
.no-js #loader-wrapper {
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #16a085;
  -webkit-animation: spin 1.7s linear infinite;
          animation: spin 1.7s linear infinite;
  z-index: 11;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin-reverse .6s linear infinite;
          animation: spin-reverse .6s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}

/* Business card */
::-moz-selection {
  color: #fff;
  background: #2a2b39;
}
::selection {
  color: #fff;
  background: #2a2b39;
}

::-moz-selection {
  color: #fff;
  background: #2a2b39;
}

body, html {
  font-family: 'Raleway', sans-serif;
  background-image: url(http://imgh.us/bg_1.svg);
  background-size: cover;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9;
}

p {
  padding: 0;
  margin: 0;
  display: inline-block;
}

a {
  color: #2a2b39;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a:hover {
  color: #6acd79;
}

.bussinesscard {
  height: 320px;
  width: 427px;
  overflow: hidden;
  box-shadow: 0px 0px 43px -10px black;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.bussinesscard .flip {
  transition: all 0.5s ease;
}
.bussinesscard .front {
  z-index: 11;
  width: 100%;
  position: absolute;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  transition: all 0.6s ease;
}
.bussinesscard .front .top {
  height: 50%;
  background: #2a2b39;
}
.bussinesscard .front .top:after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.bussinesscard .front .top:after {
  left: 50%;
  width: 2em;
  height: 2em;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  bottom: 9em;
  z-index: 10;
  background: inherit;
}
.bussinesscard .front .top .logo {
  display: inline-block;
  background: #6acd79;
  color: #fff;
  z-index: 11;
  padding: .16em;
  border: 8px solid #fff;
  position: relative;
  pointer-events: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
  margin-top: .4em;
  font-size: 4em;
}
.bussinesscard .front .top .logo .fat {
  font-weight: 800;
}
.bussinesscard .front .top .logo .skinny {
  font-weight: 100;
}
.bussinesscard .front .nametroduction {
  margin-top: 2.4em;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: 8;
}
.bussinesscard .front .name {
  color: #2a2b39;
  font-weight: 400;
  font-size: 3.2em;
  text-align: center;
  position: relative;
  margin-bottom: .35em;
}
.bussinesscard .front .name:after {
  content: '';
  position: absolute;
  top: 1.3em;
  width: 20%;
  left: 40%;
  right: 40%;
  height: 1px;
  background: #2a2b39;
}
.bussinesscard .front .introduction {
  text-align: center;
  color: #2a2b39;
  font-family: 'Old Standard TT', serif;
  font-style: italic;
}
.bussinesscard .front .contact {
  color: #2a2b39;
  margin-left: 1.7em;
  font-weight: 300;
  font-size: 1.6em;
  -webkit-transform: translateY(400%);
  transform: translateY(400%);
}
.bussinesscard .front .contact span {
  color: #2D3244;
  font-size: 1.7em;
  width: 1.3em;
  display: inline-block;
}
.bussinesscard .front .contact a {
  position: relative;
  bottom: .24em;
}
.bussinesscard .back {
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
}

.tooltip {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: #fff;
  font-weight: 300;
  padding: .4em;
  background: #2a2b39;
}

/* HOVER ANIMATIONS */
.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact {
  transition: all 0.7s ease-in-out;
}

.flip:hover .front .top .logo {
  margin-top: .28em;
  font-size: 1.3em;
  border: 3px solid #fff;
  margin-left: .15em;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  left: 0;
}

.flip:hover .front .top {
  height: 15%;
}
.flip:hover .front .top:after {
  width: 1.5em;
  height: 1.5em;
  bottom: 16.3em;
}

.flip:hover .front .nametroduction {
  -webkit-transform: translateY(400%);
  transform: translateY(400%);
}

.flip:hover .front .contact {
  -webkit-transform: translateY(-52%);
  transform: translateY(-52%);
}


/*Downloaded from https://www.codeseek.co/mavieth/css3-spin-preloader-preload-page-digcj */
$(document).ready(function() {
 
  // Fakes the loading setting a timeout
    setTimeout(function() {
        $('body').addClass('loaded');
    }, 1000);
 
});

Comments