ahmadalli.net

by ahmadalli

HTML

<link href='http://fonts.googleapis.com/css?family=Kreon' rel='stylesheet' type='text/css'>
<div id="loading">
    <div class="circle"></div>
    <div class="circle1"></div>
</div>
<div id="page">
    <div id="titles">
        <span id="names">
            <span id="left">احمدعلی شفیعی</span><span id="line">|</span><span id="right">Ahmadali Shafiee</span>
        </span>
        <br />
        <img id="image" src="http://ahmadalli.net/pic.png">
    </div>
</div>

CSS

body{
   /* background-color: #EBEBEB;*/
    
}

#page{
    display: none;
    
}

#titles{
    position: relative;
    text-align: center;
    top: 50px;
    font-size: 50px;
   
}

#names{
    box-shadow: 0px 0px 20px #E6FFE6;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 14px;
    background-color: #FFEEC9;
    border-radius: 5px;
    /*text-shadow:0px 0px 20px #A1B4FF;*/
}

#left{
    /*margin-right:2.5px;*/
    font-family: "B Baran";
}
#right{
    /*margin-left:2.5px;*/
    font-family: 'Kreon', serif;
    font-size: 35px;
}
#line{
    color: #0F0F0F;
}

/*Loading*/
#loading{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:-25px;
    margin-left:-25px;
}
.circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7; 
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% {...

JavaScript

$(window).bind('load', function() {
    //setTimeout(function() {
    $("#loading").fadeOut(200, "", "");
    $("#page").fadeIn(200, "", "");
    //}, 2500);
});