weui/src/style/base/mixin/setLoading.less

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

/*
* Tencent is pleased to support the open source community by making WeUI available.
* 
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
* 
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
* 
*       http://opensource.org/licenses/MIT
* 
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

.setCircleLoading(@color:currentColor,@size:80px,@wide:7px){
  display:inline-flex;
  position:relative;
  width:@size;
  height:@size;
  vertical-align:middle;
  color:@color;
  animation: circleLoading 1s steps(60,end) infinite;

  &:before,&:after{
    content:"";
    display:block;
    width:@size/2;
    height:@size;
    box-sizing:border-box;
    border:@wide solid;
    border-color:currentColor;
  }

  &:before{
    border-right-width:0;
    border-top-left-radius:@size;
    border-bottom-left-radius:@size;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 8%, rgba(0,0,0,.3) 95%);
  }
  &:after{
    border-left-width:0;
    border-top-right-radius:@size;
    border-bottom-right-radius:@size;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 8% , rgba(0,0,0,.3) 95%);
  }
  &__dot{
    position:absolute;
    top:0;
    left:50%;
    margin-left:-@wide/2;
    width:@wide;
    height:@wide;
    border-top-right-radius:@wide;
    border-bottom-right-radius:@wide;
    background:currentColor;
  }

  @keyframes circleLoading {
    0% {
      transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
      transform: rotate3d(0, 0, 1, 360deg);
    }
  }
}