<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)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js