SCSS
*, *:after, *:before{
box-sizing: border-box;
}
@import "compass";
body{
background: #eee;
}
.card{
padding: 50px 30px;
background: #fff;
margin: 15px;
position: relative;
box-shadow: 0 2px 5px rgba(0,0,0,.2)
}
/* =====================*/
.bar-loading{
position: relative;
width: 100%;
display: inline-block;
height: 5px;
background: #eee;
&:after{
content: '';
position: absolute;
left: 0;
height: 100%;
background: #E91E63;
width: 0;
@include animation(6s fullw infinite)
}
&.bounce:after{
background: #4527A0;
width: 100px;
@include animation(1.5s cubic-bezier(0.08,-0.18, 0.91, 1.14) barbounce alternate infinite)
}
&.ifinite{
overflow: hidden;
&:after{
background: #00E676;
width: 50%;
@include animation(barinfinite 3s linear infinite)
}
}
}
@include keyframes(fullw){
0%{width: 0;}
100%{width: 100%;}
}
@include keyframes(barbounce){
0%{left: 0;}
100%{left: calc(100% - 100px);}
}
@include keyframes(barinfinite){
0%{left: -50%;}
100%{left:100%;}
}
