Basic Reset

dabblet.css

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
}

html, body {
    background: #252525;
}


.content {width:800px; margin:0 auto; padding-top:50px;}
.contentBar {width:90px; margin:0 auto; padding-top:50px; padding-bottom:50px;}

.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% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

#loader {
    margin: 50px auto;
    
    background: -webkit-linear-gradient(top, #292929, #2E2E2E);
    background: -moz-linear-gradient(top, #292929, #2E2E2E);
    background: -ms-linear-gradient(top, #292929, #2E2E2E);
    background: -o-linear-gradient(top, #292929, #2E2E2E);
    background: linear-gradient(top, #292929, #2E2E2E);
    
    width: 200px;
    height: 20px;
    
    -webkit-box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
    
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    border: 4px solid rgba(255, 255, 255, 0.05);
}

#bar {
    height: 20px;
    width: 0px;
    
    background: -webkit-linear-gradient(top, #4892D9, #1960BC);
    background: -moz-linear-gradient(top, #4892D9, #1960BC);
    background: -ms-linear-gradient(top, #4892D9, #1960BC);
    background: -o-linear-gradient(top, #4892D9, #1960BC);
    background: linear-gradient(top, #4892D9, #1960BC);
    
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    -webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 030px rgba(63,137,205, 0.4);
    -moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 030px rgba(63,137,205, 0.4);
    box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30pxrgba(63,137,205, 0.4);
    
    -webkit-animation: progress 4s linear forwards;
    -moz-animation: progress 4s linear forwards;
    -ms-animation: progress 4s linear forwards;
    animation: progress 4s linear forwards;
}

@-webkit-keyframes progress {
    from {}
    to {width: 100%;}
}
@-moz-keyframes progress {
    from {}
    to {width: 100%;}
}
@-ms-keyframes progress {
    from {}
    to {width: 100%;}
}
@keyframes progress {
    from {}
    to {width: 100%;}
}

dabblet.html

<div class="content"><div class="circle"></div><div class="circle1"></div></div><div id="loader"><div id="bar"></div></div>

settings.json

{"view":"split","prefixfree":"1","page":"html"}