Flat designed responsive preloader

Flat designed responsive preloader.markdown

Flat designed responsive preloader

A Pen by Antonija Šimić on CodePen.

License.

index.html

<div class="wrapper">
  <div class="up"></div>
  <div class="loading"></div>
  <div class="down"></div>
</div>

script.js

$(window).load(function() {
  $(".loading").addClass("spin");

  setTimeout(function() {
    var currentPositon = $(".loading").css("transform");
    console.log(currentPositon)
    $(".loading").addClass("class").css("transform", currentPositon).css("transform", "none")
    $(".loading").animate({

    }, 500, function() {
      increaseWidth();
    });
  }, 1985);

  function increaseWidth() {
    $(".loading").animate({

      width: "+=100%",
    }, 2500, function() {
      slide();
      removeLine();
      moveTextRight();
      moveTextLeft();
    });
  }

  function removeLine() {
    $(".loading").animate({

      width: "0%",
    }, 2500, function() {});
  }

  function goUp() {
    $(".up").show();
    $(".up").animate({
      top: "-=50%"
    }, 2500, function() {
      $(this).hide();
    });
  }

  function goDown() {
    $(".down").show();
    $(".down").animate({
      bottom: "-=50%"
    }, 2500, function() {
      $(this).hide();
    });
  }

  function slide() {
    goUp();
    goDown();
  }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

	body,
	html {
	  height: 100%;
	  width: 100%;
	  padding: 0;
	  margin: 0;
	  overflow: hidden;
	}
	
	.wrapper {
	  width: 100%;
	  height: 100%;
	}
	
	.loading {
	  margin: 10% auto;
	  border-top: 6px solid #1abc9c;
	  width: 125px;
	  position: absolute;
	  margin: 0 auto;
	  left: 0;
	  right: 0;
	  top: 50%;
	  z-index: 9999;
	}
	
	.spin {
	  -webkit-animation: spin 1s infinite linear;
	  -moz-animation: spin 2s infinite linear;
	  -ms-animation: spin 2s infinite linear;
	  -o-animation: spin 2s infinite linear;
	  animation: spin 1s infinite linear;
	}
	
	@keyframes "spin" {
	  from {
	    -webkit-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  to {
	    -webkit-transform: rotate(360deg);
	    -moz-transform: rotate(360deg);
	    -o-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
	    transform: rotate(360deg);
	  }
	}
	
	@-moz-keyframes spin {
	  from {
	    -moz-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  to {
	    -moz-transform: rotate(360deg);
	    transform: rotate(360deg);
	  }
	}
	
	@-webkit-keyframes "spin" {
	  from {
	    -webkit-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  to {
	    -webkit-transform: rotate(360deg);
	    transform: rotate(360deg);
	  }
	}
	
	@-ms-keyframes "spin" {
	  from {
	    -ms-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  to {
	    -ms-transform: rotate(360deg);
	    transform: rotate(3670deg);
	  }
	}
	
	@-o-keyframes "spin" {
	  from {
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  to {
	    -o-transform: rotate(360deg);
	    transform: rotate(360deg);
	  }
	}
	
	.class {
	  -webkit-animation: none;
	  -moz-animation: none;
	  -o-animation: none;
	  animation: none;
	}
	
	.up {
	  background-color: #34495e;
	  width: 100%;
	  height: 50%;
	  position: absolute;
	  top: 0;
	}
	
	.down {
	  background-color: #34495e;
	  width: 100%;
	  height: 50%;
	  position: absolute;
	  bottom: 0;
	}
	
	.left-text-con,
	.right-text-con {
	  position: absolute;
	  width: 50%;
	  height: auto;
	  top: 35%;
	}
	
	.left-text-con {
	  left: -50%;
	  text-align: right;
	  margin-right: 10px;
	}
	
	.right-text-con {
	  right: -50%;
	}
	
	.text {
	  color: #34495e;
	  font-size: 4em;
	  margin: 0 auto;
	}
	
	@media (max-height: 300px) {
	  .text {
	    font-size: 3em;
	  }
	  .left-text-con,
	  .right-text-con {
	    top: 20%;
	  }
	}

.anchor-user {
  font-size: 3em;
  position: relative;
  bottom: 0;
  right: 20px;
  color: #000;
}

.anchor-user:hover {
  color: #039be5;;
    -webkit-transition: color .5s ease;
     -moz-transition: color .5s ease;
      -ms-transition: color .5s ease;
       -o-transition: color .5s ease;
          transition: color .5s ease;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

vOXMXm.markdown

vOXMXm ('-' * 6)

A Pen by Antonija Šimić on CodePen.

License.