Latest Announcemnent
New thread

Help me with Code in blogger

Status
Not open for further replies.
T

Terminate

Member
14
2015
0
0
Guys i need to ad to my blog Page Loading animation effect ( before the site load it will show image or gif after site load finished only it will show site )

so i need to add this one

here 25th one
21 to 30 Awesome Loading Animations from CodePen | Creative Blogging Tips | SeeBeeTee


HTML Code
Code: 
       <div class="loader">
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
  
  <div class="covers">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS Code
PHP: 
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);

* {
  box-sizing: border-box;
  overflow: hidden;
}

body {
  padding-top: 10em;
  text-align: center;
}

.loader {
  position: relative;
  margin: auto;
  width: 350px;
  color: white;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 250%;
  background: linear-gradient(180deg, #222 0, #444 100%);
  box-shadow: inset 0 5px 20px black;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

.loader:after {
  content: "";
  display: table;
  clear: both;
}

span {
  float: left;
  height: 100px;
  line-height: 120px;
  width: 50px;
}

.loader > span {
  border-left: 1px solid #444;
  border-right: 1px solid #222;
}

.covers {
  position: absolute;
  height: 100%;
  width: 100%;
}

.covers span {
  background: linear-gradient(180deg, white 0, #ddd 100%);
  animation: up 2s infinite;
}

@keyframes up {
  0%   { margin-bottom: 0; }
  16%  { margin-bottom: 100%; height: 20px; }
  50% { margin-bottom: 0; }
  100% { margin-bottom: 0; }
}

.covers span:nth-child(2) { animation-delay: .142857s; }
.covers span:nth-child(3) { animation-delay: .285714s; }
.covers span:nth-child(4) { animation-delay: .428571s; }
.covers span:nth-child(5) { animation-delay: .571428s; }
.covers span:nth-child(6) { animation-delay: .714285s; }
.covers span:nth-child(7) { animation-delay: .857142s; }



I found tutorials like this

5 Pre Loading Spinners for Blogger Blogs - All Blogger Tricks
Add Page Loading animation effect with beforeunload Event - Blogger Spice | Authoritative Blogger Lead
Click to expand...


and i cant sort it out how if any guy can help with code ... Up tutorials also not working good enough


BluRay Animation | A blog for download animated movies collection ( this is not mine )
i need extractly like this but that up 25one
 
6 comments
This is the script they use on the example page you showed:

PHP: 
<script type='text/javascript'>var progress = setInterval(function () {    var $bar = $('#bar');    if ($bar.width() >= 640) {        clearInterval(progress);    } else {        $bar.width($bar.width() + 60);    }}, 800);$(window).load(function() {  $("#bar").width(600);  $(".loader").fadeOut(2000);});</script>
 
OneManCrew said:
This is the script they use on the example page you showed:

PHP: 
<script type='text/javascript'>var progress = setInterval(function () {    var $bar = $('#bar');    if ($bar.width() >= 640) {        clearInterval(progress);    } else {        $bar.width($bar.width() + 60);    }}, 800);$(window).load(function() {  $("#bar").width(600);  $(".loader").fadeOut(2000);});</script>
Click to expand...

this script where i had to add in layout script or in the template html ? any how i need that 25th one bro thanks :)
 
Status
Not open for further replies.
Back
Top