是否可以扭曲进度条的开头？答案

【问题标题】：Is possible to twist the beggining of a progress bar?是否可以扭曲进度条的开头？
【发布时间】：2019-12-06 02:24:09
【问题描述】：

我不知道怎么做，真的可以用css、html、javascript或jquery在不使用图像的情况下扭曲进度条的开头吗？

我的意思：

到目前为止我得到了什么（只是一个正常的进度条..）：

#xp-bar{
  top: 60%;
  left: 5%;
  height:10px;
  width:90%;
  background:#035;
  border-radius: 5px;
  /*margin:0px 0px 0px 15px;*/
  display:inline-block;
  vertical-align:middle;
  position: absolute; }
#xp-bar-fill{
  height:100%;
  width:50.1%;
  background-color:#d50000;
  font-size:12px;
  line-height:10px;
  text-align:right; }
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px; }
.progress-bar-striped.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
@-webkit-keyframes progress-bar-stripes {
  from { background-position: 40px 0; } to { background-position: 0 0; } }
@keyframes progress-bar-stripes {
  from { background-position: 40px 0; } to { background-position: 0 0; } }

<div id='xp-bar'>
  <div id='xp-bar-fill' class="progress-bar-striped active">
  </div>
</div>

我只是想把进度条的开头扭曲成设计一样，我知道如何使用图像来做到这一点，但我想知道没有它们是否真的可行。如果有插件，可能会对插件感兴趣

【问题讨论】：

这对于单个元素是不可能的。您可以使用border-radius: 50% 创建一个圆圈，然后将其与一个单独的直线元素对齐，并进行一些创意剪辑以仅显示其中的一部分。然而，这是很多工作，我想让它跨浏览器工作将是一场噩梦，然后实际上让它像跨多个元素的单个进度条一样工作。
你试过线性渐变的svg吗？这样您就可以设置 svg 中颜色的百分比并为其设置动画：stackoverflow.com/questions/51718987/…
应该注意的是，有一个名为<progress> 的本机HTML 元素应尽可能使用，而不是<div>。但它对你的卷曲没有帮助。
好吧，希望可以做到这一点，比如以某种方式对其进行旋转.. 但需要先做一个圆圈，然后再做一个进度条，然后像你说的那样把它弯曲在一起，我不不知道如何像一个人一样使用它们，但会尝试一下，也许最终会用图像来做，无论如何，这会更容易谢谢 Rory！
这真是太棒了@NathanielFlick ！会这样做的，非常感谢！

标签： javascript jquery html css

【解决方案1】：

就像 Rory McCrossan 所说，我已经尝试让这两个元素表现得像一个，这是迄今为止的结果：

function doit(){
	$("#xp-increase-fx").css("display","inline-block");
	$("#xp-bar-fill").css("box-shadow",/*"0px 0px 15px #06f,*/ "-5px 0px 10px #fff inset");
	$("#xp-circle-fill").css("box-shadow",/*"0px 0px 15px #06f,*/ "-5px 0px 10px #fff inset");
	
	setTimeout(function(){
		$("#xp-bar-fill").css("-webkit-transition","all 2s ease");
		$("#xp-bar-fill").css("width","80%");
		$("#xp-circle-fill").css("-webkit-transition","all 0.34s ease").css("width","100%");
	},100);
	
	setTimeout(function(){
		$("#xp-increase-fx").fadeOut(500);
		$("#xp-bar-fill").css({"-webkit-transition":"all 0.5s ease","box-shadow":""});
		$("#xp-circle-fill").css({"-webkit-transition":"all 1s ease","box-shadow":""});
	},2000);
	
	setTimeout(function(){
		$("#xp-bar-fill").css("width", "0.1%");
		setTimeout(function(){ $("#xp-circle-fill").css("width", "0.1%"); },200);
	},3000);
  }

#xp-widget{
  position:absolute;
  top: 20%;
  width: 310px;
  left: 50%;
  transform: translateX(-50%); }
#xp-bar,#xp-circle,#xp-ol-circle{
  left: 16px;
  height:10px;
  width:92%;
  background:#035;
  border-radius: 5px;
  overflow: hidden;
  display:inline-block;
  vertical-align:middle;
  position: absolute; }
#xp-circle{
  top: -18px;
  left: 13px;
  height: 50px;
  width: 50px;
  border-radius: 50%; }
#xp-ol-circle{
  top: -9px;
  left: 21px;
  height: 33px;
  width: 33px;
  border-radius: 50%; }
#xp-bar-fill,#xp-circle-fill{
  height:100%;
  width:0.1%;
  background-color:#d50000;
  font-size:12px;
  line-height:10px;
  text-align:right; }
#xp-circle-fill{ width: 0.1%; border-radius: 50%; }
#xp-increase-fx{
  position:relative;
  display:none;
  height:100%; }
.xp-increase-glow1{
  position:absolute;
  margin:0px 0px 0px -2px;
  left:0px;
  top:0px;
  background:#fff;
  width:5px;
  height:100%;
  border-radius:0px;
  -webkit-filter:blur(2px); }
.xp-increase-glow2{
  position:absolute;
  margin:-5px 0px 0px -2px;
  left:0px;
  top:0px;
  background:#aaf;
  width:5px;
  height:200%;
  border-radius:0px;
  -webkit-filter:blur(10px); }
.xp-increase-glow3{
  position:absolute;
  margin:0px 0px 0px -5px;
  left:0px;
  top:0px;
  background:#fff;
  width:10px;
  height:100%;
  border-radius:5px;
  -webkit-filter:blur(5px); }
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px; }
.progress-bar-striped.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite; }

.mCharLvl {
  top: 8px;
  left: 1px;
  width: 33px;
  position: absolute;
  color: #ffffff;
  text-shadow: -1px 0px black, 1px 0px black, 0px 1px black, 0px -1px black, 1px 1px black, 2px 2px #000000; }

.debugTest { top: 20%; position: absolute; }

@-webkit-keyframes progress-bar-stripes {
  from { background-position: 40px 0; } to { background-position: 0 0; } }
@keyframes progress-bar-stripes {
  from { background-position: 40px 0; } to { background-position: 0 0; } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="xp-widget">
					<tr>
					  <th id='xp-bar'>
						<div id='xp-bar-fill' class="progress-bar-striped active">
						  <div id='xp-increase-fx'>
							<div id='xp-increase-fx-flicker'>
							  <div class='xp-increase-glow1'></div>
							  <div class='xp-increase-glow2'></div>
							  <div class='xp-increase-glow3'></div>
							</div>
							<div class='xp-increase-glow2'></div>
						  </div>
						</div>
					  </th>
					  <th id="xp-circle">
						<div id='xp-circle-fill' class="progress-bar-striped active">
						  <div id='xp-increase-fx'>
							<div id='xp-increase-fx-flicker'>
							  <div class='xp-increase-glow1'></div>
							  <div class='xp-increase-glow2'></div>
							  <div class='xp-increase-glow3'></div>
							</div>
							<div class='xp-increase-glow2'></div>
						  </div>
						</div>
					  </th>
					  <th id="xp-ol-circle"><span id="mCharLevel" class="mCharLvl">7</span></th>
					</tr>
				  </table>
          <button class="debugTest" onclick="doit()">Try Me !</button>

但我最终会像 Nathaniel Flick 建议的那样尝试 Svg，能够使用预定义的路径很有用，我会说这是更好的方法，因为我希望进度条遵循一条看起来不可能或非常棘手的路径

感谢您的建议！

【讨论】：