burger loader

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container loader">
    <div class="plate"></div>
    <div id="burger">
        <div class="burger6"></div>
        <div class="burger5"></div>
        <div class="burger4"></div>
        <div class="burger3"></div>
        <div class="burger2"></div>
        <div class="burger1"></div>
    </div>
    
</div>

CSS

.container{
    position: relative;
    width: 166px;
    height: 200px;
    overflow: hidden;
}
.container.loader{
    border-radius: 100%;
    background-image: url('http://kalu.16mb.com/public_html/burger/loaderbg.jpg');
    display: inline-block;
    height: 166px;
}
.cover{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 167px;
    height: 99px;
    background-image: url('http://kalu.16mb.com/public_html/burger/takaras.png');
    background-repeat: no-repeat;
}
.circle{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 165px;
    height: 166px;
    background-image: url('http://kalu.16mb.com/public_html/burger/circle.png');
    background-repeat: no-repeat;
}
#burger{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 31px;
    height: 25px;
    margin: -12px 0 0 -15px;    
}
.burger1{
    position: absolute;
    bottom: 12px;
    left: 0px;
    width: 31px;
    height: 12px;
    background-image: url('http://kalu.16mb.com/public_html/burger/burger1.png');
    background-repeat: no-repeat;
}
.burger2{
    position: absolute;
    bottom: 9px;
    left: 0px;
    width: 30px;
    height: 4px;
    background-image: url('http://kalu.16mb.com/public_html/burger/burger2.png');
    background-repeat: no-repeat;
}
.burger3{
    position: absolute;
    bottom: 6px;
    left: 13px;
    width: 14px;
    height: 7px;
    background-image: url('http://kalu.16mb.com/public_html/burger/burger3.png');
    background-repeat: no-repeat;
}
.burger4{
    position: absolute;
    bottom: 6px;
    left: 1px;
    width: 14px;
    height: 7px;
    background-image: url('http://kalu.16mb.com/public_html/burger/burger4.png');
    background-repeat: no-repeat;
}
.burger5{
    position: absolute;
    bottom: 4px;
    left: 0px;
    width: 29px;
    height: 5px;
    background-image: url('http://kalu.16mb.com/public_html/burger/burger5.png');
    background-repeat: no-repeat;
}
.burger6{
    position: absolute;
    bottom: 0px;
    left:...

JavaScript

TweenMax.staggerFrom("#burger div",0.6,{
    opacity: 0,
    	bottom: 15,
    	delay: 1,
	}, 0.6);