Home / Tutorial CSS / Tutorial Javascript / Cara buat preloading di website

Cara buat preloading di website

,

Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana caranya membuat preloading di website.
Berikut ini syntaxnya.
---------------------
<html>
<head>
   <title>Loader</title>
   <style type="text/css">
    /*Loader*/
#loader-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1000;
}

/*Text Loading */
h2{
display: block;
position: relative;
top: 13%;
font-size: 50px;
font-family: Brush Script Std;
text-align: center;
color: blue;
z-index: 1001;
animation: mymove 1.5s infinite alternate;
}

/*animasi*/
@keyframes mymove
{
 0%{
    opacity: 100;
 }

 100%{
    opacity: 0;
 }
}



/*Loader Animation*/
#loader {
 display: block;
 position: relative;
 left: 49%;
 top: 20%;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 margin: -75px 0 0 -75px;
 border: 5px solid transparent;
 border-top-color:#3498db;
 border-bottom-color: #3498db;
 z-index: 1001;
   animation: spin 1s linear infinite ;
}

#loader:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 5px solid transparent;
border-radius: 50%;
border-left-color: #e74c3c;
border-right-color:  #e74c3c;
z-index: 1001;
animation: spin 0.5s ease-in-out infinite ;
}

#loader:after {
content: "";
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
border-radius: 50%;
border: 5px solid transparent;
border-top-color: #f9c922;
border-bottom-color:  #f9c922;
z-index: 1001;
animation: spin 1s ease infinite ;
}

@keyframes spin
{
 0% {
     transform: rotate(0deg) ;
 
 }

 100% {
     transform: rotate(360deg);
 }
}


/*Background Section Animation*/
#loader-wrapper .loader-section {
 position: fixed;
 top: 0;
 width: 51%;
 height: 100%;
 background: #222;
 z-index: 1000;
}

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

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

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

.loaded #loader {
 opacity: 0;
 transition: all 0.3s ease-out;
}
.loaded h2{
 opacity: 0;
 transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
transform: translateY(-100%);
transition: all 0.3s 1s ease-out;
}
   </style>


</head>
<body>
<div id="loader-wrapper">
<h2>Loading...</h2>
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>


<img src="https://assets.vg247.com/current//2014/08/dota-2-official.jpg" style="width:100%;height:98%;background:cover;">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  setTimeout(function(){
    $('body').addClass('loaded');
    $('h1').css('color','#222222')
  }, 1000);
});
</script>
</body>
</html>


---------------------------------------
Semoga bermanfaat.
Sumber : www.codepolitan.com
Cara buat preloading di website Cara buat preloading di website Reviewed by Syawaluddin Amin, S.Kom on September 06, 2016 Rating: 5

You May Also Like

Tidak ada komentar:

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.