CSS graphic and animation
HTML
<a href="javascript:;" class="btn is-active">
<span class="dash dash-one"></span>
<span class="dash dash-two"></span>
<span class="dash-small dash-three"></span>
</a>
SCSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 10px;
}
.btn {
display: block;
padding: 14px 0 0 13px;
width: 105px;
height: 40px;
overflow: hidden;
}
.btn.is-active {
background: #7273a3;
}
.dash,
.dash-small {
display: block;
margin-bottom: 2px;
width: 19px;
height: 3px;
text-indent: -99999px;
background: #fff;
}
.dash-small {
width: 13px;
}
JavaScript
// Loading Animation
function animateDashs() {
// Define vars
dash1 = $('.btn .dash-one');
dash2 = $('.btn .dash-two');
dash3 = $('.btn .dash-three');
// Animations
function animateDash1() {
$(dash1).animate({
width: 0,
marginLeft: 34
}, 500, function() {
$(dash1).css('margin-left', 0).css('width', 0);
animateDash2();
});
}
function animateDash2() {
$(dash2).animate({
width: 0,
marginLeft: 34
}, 500, function() {
$(dash2).css('margin-left', 0).css('width', 0);
animateDash3();
});
}
function animateDash3() {
$(dash3).animate({
width: 0,
marginLeft: 34
}, 500, function() {
$(dash3).css('margin-left', 0).css('width', 0);
animateDash12();
});
}
function animateDash12() {
$(dash1).animate({
width: 19,
marginLeft: 0
}, 500, function() {
animateDash22();
});
}
function animateDash22() {
$(dash2).animate({
width: 19,
marginLeft: 0
}, 500, function() {
animateDash32();
});
}
function animateDash32() {
$(dash3).animate({
width: 13,
marginLeft: 0
}, 500, function(){
animateDash1();
});
}
// Start animation
animateDash1();
}
$(document).ready(function(){
$('.btn').live('click', function(){
animateDashs();
});
});