Question

我正在尝试在水平线上创建一个加载器。我的HTML是：

SNotificationCenter.defaultCenter().addObserver(self, selector: #selector(self.accelerationGetOrientation), name: UIDeviceOrientationDidChangeNotification, object: nil)

func accelerationGetOrientation(){
    uMM = CMMotionManager()
    uMM.accelerometerUpdateInterval = 0.2

    uMM.startAccelerometerUpdatesToQueue( NSOperationQueue() ) { p, _ in
        if p != nil {
            if abs( p!.acceleration.y ) < abs( p!.acceleration.x ) {
                //LANDSCAPE
                dispatch_async(dispatch_get_main_queue()) {
                    //Do UI Changes
                }
            }
            else {
                //PORTRAIT
                dispatch_async(dispatch_get_main_queue()) {
                    //Do UI Changes
                }
            }
        }
    }
}

我的css是：

<div class="animated yt-loader"></div>

但是像这样我无法通过数据加载来做到这一点。我需要添加一些延迟或其他任何东西，以便在数据加载3s或4s后，线宽增加100％。

Answer 1

您已将动画持续时间编辑为2s或4s。

body {
  margin: 0;
}
.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.yt-loader {
    -webkit-animation-name: horizontalProgressBar;
    animation-name: horizontalProgressBar;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    background: #ef534e;
    height: 3px;
    left: 0;
    top: 0;
    width: 0%;
    z-index: 9999;
    position:relative;
}

.yt-loader:after{
  display: block;
  position: absolute;
  content:'';
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: #ef534e 1px 0 6px 1px;
  opacity: 0.5;
}
@keyframes horizontalProgressBar
{
    0%   {width: 0%;}
    20%  {width: 10%;}
    30%  {width: 15%;}
    40%  {width: 18%;}
    50%  {width: 20%;}
    60%  {width: 22%;}
    100% {width: 100%;}
}

<div class="animated yt-loader"></div>

Answer 2

先生，

您必须在Animated班级

中更改动画持续时间

-webkit-animation-duration: 2s;
    animation-duration: 2s;

DEMO HERE

数据加载时的水平加载

2 个答案: