Sayfa Ön Yükleme Eklentisi - 3

<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 3 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    color:#eaf8ff;
    z-index:999;
    font-family:Verdana,sans-serif!important
}
@-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 loader-bg{
    0%{
        background-color:#306f99
    }
    50%{
        background-color:#19470f
    }
    90%{
        background-color:#734a10
    }
}
@-moz-keyframes loader-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
    }
}
.loader-wrap{
    font-size:18px;
    font-weight:700;
    left:25%;
    letter-spacing:5px;
    margin-left:-80px;
    margin-top:-40px;
    position:absolute;
    top:50%;
    width:68%
}
.loader-bg{
    padding:30px 30px 30px 0;
    background:#306f99;
    -moz-animation:loader-bg 1.5s linear infinite;
    -webkit-animation:loader-bg 1.5s linear infinite;
    animation:loader-bg 1.5s linear infinite;
    -moz-box-shadow:inset 0 0 45px 30px #000;
    -webkit-box-shadow:inset 0 0 45px 30px #000;
    box-shadow:inset 0 0 45px 30px #000
}
.pre-loading{
    position:relative;
    text-align:right;
    text-shadow:0 0 6px #bce5ff;
    height:20px;
    width:150px;
    margin:0 auto
}
.pre-loading span{
    display:block;
    position:absolute;
    right:30px;
    height:20px;
    width:400px;
    line-height:20px
}
.pre-loading span:after{
    content:"";
    display:block;
    position:absolute;
    top:-2px;
    right:-21px;
    height:20px;
    width:16px;
    background:#eaf6ff;
    -moz-box-shadow:0 0 15px#bce4ff;
    -webkit-box-shadow:0 0 15px #bce5ff;
    box-shadow:0 0 15px #bce5ff;
    -moz-animation:blink 3.4s infinite;
    -webkit-animation:blink 3.4s infinite;
    animation:blink 3.4s infinite
}
.pre-loading span.title{
    -moz-animation:title 3.4s linear infinite;
    -webkit-animation:title 3.4s linear infinite;
    animation:title 3.4s linear infinite
}
.pre-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>
</head>
<body>
<div id='PreLoader'>
<div class="loader-wrap">
<div class="loader-bg">
<div class="pre-loading">
<span class="title">Yükleniyor...</span>
<span class="text">Kodeks Editör</span>
</div></div></div></div>
</body>
</html>

Kodeks Editör

Sayfa Ön Yükleme Eklentisi - 3

"Sayfa Ön Yükleme Eklentisi - 3" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Sayfa Ön Yükleme Eklentisi - 3

"Sayfa Ön Yükleme Eklentisi - 3" 0 Yorum yapıldı.

Yorum Gönder