SCSS loader effect

前端开发whqet,csdn,王海庆,whqet,前端开发专家

几天来看一组利用SCSS实现的loader effect(加载效果)，鼓励大家自行动手实现，当然也可以到CodePen在线研究，效果如下所示。

制作这个案例前，需要准备这些。

1.掌握scss的使用，当然不用也可以，使用scss会比较高效。

2.掌握利用css3的box-shadow、border、border-radius的实现绘图。

3.掌握css3的动画方法。

4.一些耐心、一些创意（创意可以让你更好）

5.学会解析案例，先看静态图。

好的言归正传，我们来一步步的实现。

html部分如下，我们这里把所有的loader放到一个容器里面去，然后给每个loader两个类，一个类loader作统一设置，另一个类作个性化设置。

<div id='loaders'>
  <div class='loader ball'></div>
  <div class='loader spin'></div>
  <div class='loader single'></div>
  <div class='loader double'></div>
  <div class='loader triple'></div>
  <div class='loader dots'></div>
</div>

接下来就是css了，我们这里使用scss来简化css的书写。

/*
 * CSS重置，这里使用CSSReset，篇幅限制不再列出，另外使用prefix-free所以可以不考虑浏览器前缀
 * */
*, *:before, *:after { box-sizing: border-box; }

/*
 * loader颜色取随机色
 * */
$color: hsl(random(360),75%,50%); $speed: 500ms;

/*
 * 整体设置
 * 网页背景色、loaders居中显示
 * loader的宽、高、圆角、动画
 * */
body { background: #111; }
#loaders {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 50px;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  .loader {
    position: relative;
    width: 50px; height: 50px;
    border-radius: 100%;
    border-style: solid;
    animation: loader $speed linear infinite;
 /*
 * 转动眼睛的设计，利用box-shadow的inset方法
 * */
    &.ball { box-shadow: inset 5px 5px 0 10px $color; }
 /*
 * 转环的设计，box-shadow配合border-width
 * */
    &.spin {
      border-width: 1px 1px 2px;
      border-color: $color;
      box-shadow: 0 1px $color;
    }
 /*
 * 单线的设计，border-width、border transparent
 * */
    &.single {
      border-width: 1px;
      border-color: $color transparent transparent;
    }
 /*
 * 双线的设计，border-width、border transparent
 * */
    &.double {
      border-width: 1px;
      border-color: $color transparent;
    }
/*
 * 三线的设计，border-width、border transparent
 * */
    &.triple {
      border-width: 1px;
      border-color: $color;
      border-top-color: transparent;
    }
/*
 * 环点的设计，box-shadow和before、after伪对象
 * */
    &.dots {
      animation-timing-function: steps(8);
      &:before,
      &:after {
        content: '';
        position: absolute;
        width: 10px; height: 10px;
        margin: auto;
        border-radius: 100%;
        background: $color;
      }
      &:before {
        top: 0; left: 0; right: 0;
        box-shadow: 20px 20px rgba($color,.8), 14px 6px rgba($color,.9), 14px 34px rgba($color,.7);
      }
      &:after {
        left: 0; right: 0; bottom: 0;
        background: rgba($color,.6);
        box-shadow: -20px -20px rgba($color,.4), -14px -6px rgba($color,.5), -14px -34px rgba($color,.3);
      }
    }
  }
}
/*
 * 旋转动画
 * */
@keyframes loader { 
	to { transform: rotate(360deg); } }
}

-------------不过瘾，再加一个--------------------

<div id='loaders'>
  <div class='loader doubleCircle'></div>
</div>

$colorr: hsl(180+random(180),85%,50%);
@keyframes loaderr { from { transform: rotate(1800deg); } }
&.doubleCircle {
        border-width:2px;
        border-color:$color transparent;
        &:before {
          content:"";
          position: absolute;
          width:56px;
          height:56px;
          top:-5px;
          left:-5px;
          border-radius:100%;
          border-style:solid;
          border-width:3px;
          border-color:transparent $colorr;
          animation: loaderr $speed*3 linear infinite;
      }
    }

前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------