Thứ Ba, 28 tháng 10, 2014

Tạo trang loading khi chờ chuyển trang cho blogger là thủ một thủ thuật nhỏ, khi bạn chuyển thì một bài viết này sang một bài viết khác trên blog thì thay vì nó load sẽ là một trang trắng thì nay Hồng Designer sẽ giới thiệu với các bạn bài này để đỡ nhàm chán hơn.
Ở đây tôi có 5 mẫu loading cho các bạn lựa chọn. Các bạn có thể xem demo và lựa chọn mẫu code demo tương ứng.

Cách Tạo trang loading khi chờ chuyển trang cho blogger

Các bạn coppy code bên dưới đây và bỏ vào bên trong thẻ <body>...</body> trong template của bạn.

DEMO 1

<div id="loader">
        <div class="spinner">
            <div class="spinner-inner"></div>
        </div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>

DEMO 2

<div id='loader'><div class="wrap"><div class="bg"><div class="loading"><span class="title">loading...</span><span class="text"><data:blog.title/></span></div> </div></div></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

DEMO 3

<div id='loader'><div class='preload-juggle'>  <div class='ball'></div>  <div class='ball'></div>  <div class='ball'></div></div></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.preload-juggle&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000}.preload-juggle {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}.preload-juggle div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;}.preload-juggle div:nth-child(1) {animation-delay: -0.7s;}.preload-juggle div:nth-child(2) {animation-delay: -1.4s;}@keyframes juggle {0% {transform: translateX(0px) translateY(0px);}12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;}25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out;  }37.5% {transform: translateX(25px) translateY(55px);}50% {transform: translateX(0px) translateY(0px);}62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; } 75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;}87.5% {transform: translateX(-25px) translateY(55px); }100% {transform: translateX(0px) translateY(0px);}}</style>  

DEMO 4

<div id='loader'><div class="spinner"></div>    </div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-wiggle 1.2s infinite}@keyframes spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>

DEMO 5

<div id='loader'><div class='balls'></div><div class='balls'></div><div class='balls'></div><div class='balls'></div></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>    <script type='text/javascript'>        $(window).load(function () {            setTimeout(function () {                $(&quot;.balls&quot;).fadeOut(&quot;slow&quot;);                setTimeout(function () {                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)                }, 1000)            }, 1000)        });    </script><style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>

0 nhận xét:

Đăng nhận xét