<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sublime Text Loader</title>
</head>
<body style="background:#222;">
<div class="st-loader"><span class="equal"></span></div>
</body>
</html>@import compass
// settings
$loaderWidth : 10em
$loaderColor : #f80
$duration : 1.5s
// computations
$loaderHeight : $loaderWidth/4
$marginLeft : $loaderWidth/2
$marginTop : $loaderHeight/2
$insideWidth : $loaderWidth/6
$insideHeight : $loaderWidth/10
$borders : $loaderWidth/40
$position : $loaderWidth/13
// animation
+keyframes(loading)
0%
left: 0
50%
left: $loaderWidth - $insideWidth
100%
left: 0
// styles
.st-loader
width: $loaderWidth
height: $loaderHeight
position: absolute
top: 50%
left: 50%
margin: -$marginTop 0 0 (-$marginLeft)
box-sizing: border-box
.st-loader:before,
.st-loader:after
content: ''
display: block
position: absolute
top: 0
bottom: 0
width: $marginTop
box-sizing: border-box
border: $borders solid $loaderColor
.st-loader:before
left: -$position
border-right: 0
.st-loader:after
right: -$position
border-left: 0
.st-loader .equal
display: block
position: absolute
top: 50%
margin-top: -$insideHeight/2
left: $marginLeft - $insideWidth/2 // centered if no animation
height: $insideHeight
width: $insideWidth
border: $borders solid $loaderColor
box-sizing: border-box
border-width: $borders 0
+animation(loading $duration infinite ease-in-out)
External CSS
This Pen doesn't use any external CSS resources.