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, 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, 0.3) 95%);
  }
  &__dot {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -@wide/2;
    width: @wide;
    height: @wide;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    background: currentColor;
  }

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

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