$bar: 20px; $foo: $bar * 16; $color: #c5cae9; body { background: #1a237e; font-family: 'Source Sans Pro'; font-weight: 400; font-size: 22px; line-height: 1em; color: $color; } .container { margin: 0 auto; // rough center width: $foo; padding: 0 0 10px 10px; height: auto; border: solid $color; border-width: 0 0 1px 1px; } h1 { text-align: center; font-weight: 700; line-height: 1em; } .loading-bar { position: relative; width: $foo; height: $bar; margin-top: 70px; top: -1 * $bar; &:before { position: relative; top: $bar; left: -300px - 20; display: block; width: 300px; content: ''; text-align: right; text-transform: lowercase; } &.option1 { &:before { content: 'Linear'; } .loading { animation-timing-function: linear; } } &.option2 { &:before { content: 'Ease-in'; } .loading { animation-timing-function: ease-in; } } &.option3 { &:before { content: 'Ease-out'; } .loading { animation-timing-function: ease-out; } } &.option4 { &:before { content: 'Ease'; } .loading { animation-timing-function: ease; } } &.option5 { &:before { content: 'Steps(4)'; } .loading { animation-timing-function: steps(4); } } &.option6 { &:before { content: 'cubic-bezier(0,1,1,0)'; } .loading { animation-timing-function: cubic-bezier(0,1,1,0); } } .loading { position: relative; width: $bar; height: $bar; background: $color; animation: grow 4s linear infinite, move 4s linear infinite; } } @keyframes move { 0% { left: 0 ; } 16.7% { left: 0 ; } 33.3% { left: $foo / 2 ; } 50% { left: $foo - $bar ; } 66.7% { left: $foo / 2 ; } 83.3% { left: 0 ; } 100% { left: 0 ; } } @keyframes grow { 0% { width: $bar ; } 16.7% { width: $foo / 2 ; } 33.3% { width: $foo / 2 ; } 50% { width: $bar ; } 66.7% { width: $foo / 2 ; } 83.3% { width: $foo / 2 ; } 100% { width: $bar ; } }