CSS3很极客的一个加载动画

很Geek的一个加载动画，模仿Sublime编辑器包加载时的动画：一个等号在两个方括号之间来回摆动。

load,equal sign

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2875
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-moz-keyframes loading {
  0% {
    left: 0;
  }
  50% {
    left: 8.33333em;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes loading {
  0% {
    left: 0;
  }
  50% {
    left: 8.33333em;
  }
  100% {
    left: 0;
  }
}
@keyframes loading {
  0% {
    left: 0;
  }
  50% {
    left: 8.33333em;
  }
  100% {
    left: 0;
  }
}
.st-loader {
  width: 10em;
  height: 2.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.25em 0 0 -5em;
  box-sizing: border-box;
}

.st-loader:before,
.st-loader:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.25em;
  box-sizing: border-box;
  border: 0.25em solid #f80;
}

.st-loader:before {
  left: -0.76923em;
  border-right: 0;
}

.st-loader:after {
  right: -0.76923em;
  border-left: 0;
}

.st-loader .equal {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 4.16667em;
  height: 1em;
  width: 1.66667em;
  border: 0.25em solid #f80;
  box-sizing: border-box;
  border-width: 0.25em 0;
  -moz-animation: loading 1.5s infinite ease-in-out;
  -webkit-animation: loading 1.5s infinite ease-in-out;
  animation: loading 1.5s infinite ease-in-out;
}

HTML

很Geek的一个加载动画，模仿Sublime编辑器包加载时的动画：一个等号在两个方括号之间来回摆动。

load,equal sign

编辑器支持Emmet

快捷键

很Geek的一个加载动画，模仿Sublime编辑器包加载时的动画：一个等号在两个方括号之间来回摆动。

load,equal sign

CSS3一组圆摆线构成的内接正方形加载动画

HTML5 SVG很不错的一个红黄蓝三色粘稠融合加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：