Skip to content

Instantly share code, notes, and snippets.

@speednos

speednos/indexHitmanFade.html

Last active December 14, 2015 08:19
Show Gist options
  • Save speednos/5056871 to your computer and use it in GitHub Desktop.
Save speednos/5056871 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by speednos. Hitman Loading Sequence - Logo and loading sequence with CSS3
Raw
indexHitmanFade.html
<div class="loader">
<span class="h"></span>
<span class="h"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="h"></span>
<span class="h"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="h"></span>
<span class="h"></span>
</div>
<div class="loader2">
<span class="h"></span>
<span class="h"></span>
<span>S</span>
<span>P</span>
<span>E</span>
<span>E</span>
<span>D</span>
<span>N</span>
<span>O</span>
<span>S</span>
<span class="h"></span>
<span class="h"></span>
</div>
Raw
script.js
/*
this is a video of the original loading sequence:
http://youtu.be/1dt_OZJJzoU
*/
Raw
style.css
*{
margin:0;
padding:0;
}
body{
background:black;
}
.border{
border-top:3px solid #6d101a;
display:block;
margin-top:-25px;
width:560px;
-webkit-filter:blur(1px);
}
.loader{
margin-top:50px;
width:155px;
margin:50px auto 0 auto;
height:85px;
}
.loader span{
display:block;
float:left;
background:white;
height:2%;
opacity:0;
-webkit-filter:blur(1px);
animation: fade 4.5s ease-out infinite;
}
.loader .h{
animation: fadelong 4.5s ease-out infinite;
}
.loader span:nth-child(1){
width:2px;
margin-right:1px;
animation-delay: .75s;
}
.loader span:nth-child(2){
width:1px;
margin-right:1px;
animation-delay: .8s;
}
.loader span:nth-child(3){
width:1px;
margin-right:1px;
animation-delay: .2s;
}
.loader span:nth-child(4){
width:7px;
margin-right:1px;
animation-delay: .95s;
}
.loader span:nth-child(5){
width:1px;
margin-right:1px;
animation-delay: 1s;
}
.loader span:nth-child(6){
width:2px;
margin-right:4px;
animation-delay: 1.15s;
}
.loader span:nth-child(7){
width:4px;
margin-right:5px;
animation-delay: 1s;
}
.loader span:nth-child(8){
width:3px;
margin-right:1px;
animation-delay: .5s;
}
.loader span:nth-child(9){
width:1px;
margin-right:1px;
animation-delay: .85s;
}
.loader span:nth-child(10){
width:1px;
margin-right:4px;
animation-delay: .25s;
}
.loader span:nth-child(11){
width:2px;
margin-right:6px;
animation-delay: .35s;
}
.loader span:nth-child(12){
width:1px;
margin-right:6px;
animation-delay: .9s;
}
.loader span:nth-child(13){
width:2px;
margin-right:1px;
animation-delay: 1s;
}
.loader span:nth-child(14){
width:1px;
margin-right:1px;
animation-delay: 1.15s;
}
.loader span:nth-child(15){
width:1px;
margin-right:5px;
animation-delay: .15s;
}
.loader span:nth-child(16){
width:1px;
margin-right:1px;
animation-delay: .25s;
}
.loader span:nth-child(17){
width:1px;
margin-right:1px;
animation-delay: 1.25s;
}
.loader span:nth-child(18){
width:3px;
margin-right:1px;
animation-delay: 1.15s;
}
.loader span:nth-child(19){
width:2px;
margin-right:1px;
animation-delay: .5s;
}
.loader span:nth-child(20){
width:1px;
margin-right:1px;
animation-delay: .65s;
}
.loader span:nth-child(21){
width:4px;
margin-right:4px;
animation-delay: 1.25s;
}
.loader span:nth-child(22){
width:1px;
margin-right:1px;
animation-delay: 1.25s;
}
.loader span:nth-child(23){
width:1px;
margin-right:1px;
animation-delay: .45s;
}
.loader span:nth-child(24){
width:4px;
margin-right:5px;
animation-delay: 1s;
}
.loader span:nth-child(25){
width:4px;
margin-right:3px;
animation-delay: .4s;
}
.loader span:nth-child(26){
width:1px;
margin-right:1px;
animation-delay: .75s;
}
.loader span:nth-child(27){
width:1px;
margin-right:1px;
animation-delay: .2s;
}
.loader span:nth-child(28){
width:3px;
margin-right:5px;
animation-delay: 1s;
}
.loader span:nth-child(28){
width:3px;
margin-right:5px;
animation-delay: 1.1s;
}
.loader span:nth-child(29){
width:4px;
margin-right:3px;
animation-delay: .75s;
}
.loader span:nth-child(30){
width:1px;
margin-right:1px;
animation-delay: .9s;
}
.loader span:nth-child(30){
width:4px;
margin-right:3px;
animation-delay: 1.15s;
}
.loader span:nth-child(31){
width:2px;
margin-right:5px;
animation-delay: .25s;
}
.loader span:nth-child(32){
width:3px;
margin-right:2px;
animation-delay: .5s;
}
.loader span:nth-child(33){
width:1px;
margin-right:1px;
animation-delay: .75s;
}
.loader span:nth-child(34){
width:2px;
margin-right:0px;
animation-delay: 1s;
}
@keyframes fade{
0%{height:2%;}
1%{opacity:1;}
50%{height:90%;}
70%{opacity:1;}
95%{opacity:0;}
100%{height:90%;}
}
@keyframes fadelong{
0%{height:2%;}
1%{opacity:1;}
50%{height:100%;}
70%{opacity:1;}
95%{opacity:0;}
100%{height:100%;}
}
/*TEST BY SPEEDNOS*/
.loader2{
margin-top:50px;
width:300px;
margin:50px auto 0 auto;
height:85px;
}
.loader2 span{
display:block;
float:left;
background:white;
height:2%;
opacity:0;
-webkit-filter:blur(1px);
animation: fade 4.5s ease-out infinite;
}
.loader2 .h{
animation: fadelong 4.5s ease-out infinite;
}
.loader2 span:nth-child(1){
width:2px;
margin-right:1px;
animation-delay: .75s;
}
.loader2 span:nth-child(2){
width:1px;
margin-right:1px;
animation-delay: .8s;
}
.loader2 span:nth-child(3){
width:10px;
margin-right:1px;
animation-delay: .2s;
}
.loader2 span:nth-child(4){
width:10px;
margin-right:1px;
animation-delay: .95s;
}
.loader2 span:nth-child(5){
width:11px;
margin-right:1px;
animation-delay: 1s;
}
.loader2 span:nth-child(6){
width:13px;
margin-right:1px;
animation-delay: 1.15s;
}
.loader2 span:nth-child(7){
width:11px;
margin-right:1px;
animation-delay: 1s;
}
.loader2 span:nth-child(8){
width:13px;
margin-right:1px;
animation-delay: .5s;
}
.loader2 span:nth-child(9){
width:14px;
margin-right:1px;
animation-delay: .85s;
}
.loader2 span:nth-child(10){
width:13px;
margin-right:1px;
animation-delay: .25s;
}
.loader2 span:nth-child(11){
width:2px;
margin-right:1px;
animation-delay: .75s;
}
.loader2 span:nth-child(12){
width:1px;
margin-right:1px;
animation-delay: .8s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment