圆形装载机将达到100％

Question

我试图让这个圆形装载机正常工作但有困难。我可以做一些基本的动画，但我在CodePen上找到的这个代码比我的工资等级略高。我试图用它来了解发生了什么。

我的目标是装载机不会绕着圆周旋转。比方说，只有68％的路要走。或98％。但到目前为止，我还无法找到确定装载机绕圆圈走多远的属性/值。

我试过操纵右侧加载器类的关键帧以及transform-origin属性无效。没有骰子。

代码：

＆＃13;

＆＃13;

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
  background-color: blue;
  border-radius: 200px;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: green;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: pink;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 20s infinite linear;
  -webkit-animation: loading-left 20s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 20s infinite linear;
  -webkit-animation: loading-right 20s infinite linear;
}

@keyframes loading-left {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

＆＃13;

<div class="container mt-5">
  <div class="row">
    <div class="col-3">
      <div id="circle-loader-wrap">
        <div class="left-wrap">
          <div class="loader"></div>
        </div>
        <div class="right-wrap">
          <div class="loader"></div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我正在粘贴下面的片段，它可以满足您的需求。

我已经将对正在发生的事情的解释直接写入了执行相应动画的css规则旁边的代码注释中。

如果仍然不清楚，请发表评论。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    #circle-loader-wrap {
        overflow: hidden;
        position: relative;
        margin-top: -10px;
        width: 200px;
        height: 200px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
        background-color: blue;
        border-radius: 200px;
        transform: rotate(180deg);
    }

    #circle-loader-wrap:after {
        content: '';
        position: absolute;
        left: 15px;
        top: 15px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background-color: green;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    #circle-loader-wrap div {
        overflow: hidden;
        position: absolute;
        width: 50%;
        height: 100%;
    }

    #circle-loader-wrap .loader {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 1000px;
        background-color: pink;
    }

    #circle-loader-wrap .left-wrap {
        left: 0;
    }

    #circle-loader-wrap .left-wrap .loader {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        transform-origin: 0 50% 0;
        animation: loading-left 5s infinite linear;
    }

    #circle-loader-wrap .right-wrap {
        left: 50%;
    }

    #circle-loader-wrap .right-wrap .loader {
        left: -100%;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        transform-origin: 100% 50% 0;
        animation: loading-right 5s infinite linear;
    }

    @keyframes loading-left {
        0% {
            transform: rotate(0deg);
        }
        25%, 100% {
            transform: rotate(180deg);
        }
    }

    @keyframes loading-right {
        0%, 25% {
            transform: rotate(0deg);
        }
        50%, 100% {
/*          the following is for the second half of the cicrle */
/*          180deg means one half of the cicle or 50% of the cicle */
/*          So, 1% is gonna be 180/50 = 3.6deg */
/*          If you want 68%, then you have 18% left for the second half of the circle */
/*          To get 18%: 18x3.6 = 64.8deg */
            transform: rotate(64.8deg);
/*          Note: The transformation will happen between 25% and 50% of the total time which is 5 seconds in this case; So, it's gonna take 1.25 seconds. */
/*          In other words, it will take the same amount of time as for the first half of the circle which will make the transformation in the second half appear to be slower because it has the same time to cover a much shorter distance */
/*          Between 50% and 100% nothing happens. */
/*          That's your "pause" in this animation although technically it's not a pause. */
        }
    }
</style>

<div class="container mt-1">
    <div class="row">
        <div class="col">
        <p>68% in this case:</p>
            <div id="circle-loader-wrap">
                <div class="left-wrap">
                    <div class="loader"></div>
                </div>
                <div class="right-wrap">
                    <div class="loader"></div>
                </div>
            </div>
            <p>The comments next to the corresponding css rules show how to adjust.</p>
        </div>
    </div>
</div>

另请注意：我删除了供应商前缀，因为您现在并不真正需要这些css规则。