圆形进度条（边框）

Question

圆形进度条（边框）

htmlcsssass

3

我在dribbble上找到了这个链接：https://dribbble.com/shots/1438386-iOS7-longtouch-sharing-concept。

请问是否可以在GIF的前3秒内创建圆形进度条(其中进度条为圆的外边框)?

目前，我已经有了圆形本身，但是没有任何动画效果，您可以在jsfiddle上查看。

接下来，我该怎么做呢？ HTML:

<div class="circle"></div>

CSS:

body {
  background-color: #3a88cd;
  padding: 60px;
}

.circle {
  width: 60px;
  height: 60px;
  background: white;
  position: relative;
  border-radius: 100%;
}

.circle:after {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  bottom: -8px;
  right: -8px;
  border: 3px solid white;
  border-radius: 100%;
}

- user7332813

这似乎是一个太大的任务，无法在Stack Overflow上回答。你需要从这里走很长一段路。 - Praveen Kumar Purushothaman

也许我的问题没有表达清楚。我并不想重新创造那个 dribbble gif 中所看到的一切。我只想重新创建那个在白色圆圈周围进展的进度条。 - user7332813

啊...我刚看到了。我不认为这是可能的...我们需要使用SVG。让我试试... - Praveen Kumar Purushothaman

这里有东西：http://web.archive.org/web/20160514035222/http://blog.invatechs.com/round_progress_bar_with_html5_css3_and_javascript，以及这里：http://www.cssscript.com/pure-css-circular-percentage-bar/。 - pol

@user7332813，我提交了一个JSFiddle作为答案，展示了一种利用CSS实现你提供的那个Fiddle的方法。 - Jon Uleis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon Uleis · Accepted Answer

好的，这很有趣。有些时间可以消磨，所以我把它当作挑战去完成了。在JSFiddle中使用SCSS进行编码。我在SCSS顶部包含了一些变量来调整所有内容。jQuery仅用于单击事件添加类。

https://jsfiddle.net/44ch0p8u/11/

非Sass版本，请在此处查看实时效果：

$('.circle').on('click', function() {
  $this = $(this);
  $this.removeClass('animate');
  setTimeout(function() {
    $this.addClass('animate');
  }, 50)
})

body {
  background-color: #3a88cd;
  padding: 60px;
}
.circle {
  cursor: pointer;
  width: 74px;
  height: 74px;
  position: relative;
  border-radius: 50%;
}
.circle-right {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.circle-right:before {
  content: '';
  background: #fff;
  border-radius: 0 60px 60px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.circle-right:after {
  content: '';
  background: #3a88cd;
  border-radius: 0 60px 60px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  transform-origin: 0 50%;
  transform: scale(1.1);
}
.circle.animate .circle-right:after {
  animation: circle-half 1s forwards ease-in;
}
.circle-left {
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}
.circle-left:before {
  content: '';
  background: #fff;
  border-radius: 60px 0 0 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
.circle-left:after {
  content: '';
  background: #3a88cd;
  border-radius: 60px 0 0 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  transform-origin: 100% 50%;
  transform: scale(1.1);
}
.circle.animate .circle-left:after {
  animation: circle-half 1s 1s forwards ease-out;
}
.circle-inner {
  background: #3a88cd;
  border-radius: 50%;
  position: relative;
  width: 68px;
  height: 68px;
  top: 3px;
  left: 3px;
  z-index: 3;
}
.circle-inner:before {
  content: '';
  background: #fff;
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 60px;
  top: 4px;
  left: 4px;
}
@keyframes circle-half {
  from {
    transform: rotate(0deg) scale(1.1);
  }
  to {
    transform: rotate(180deg) scale(1.1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
  <div class="circle-inner"></div>
  <div class="circle-left"></div>
  <div class="circle-right"></div>
</div>