如何在css中使进度条的角落变圆答案

【问题标题】：How to make corners of progress bar round in css如何在css中使进度条的角落变圆
【发布时间】：2015-03-23 08:06:58
【问题描述】：

对于我的进度条，我希望将边缘变圆并在进度条内显示百分比。我设法使进度值的角是圆形的，但不是条形/背景。动画似乎也不起作用。

~css

.progress-bar body { 
font-family: "Helvetica Neue", arial, sans-serif;
padding: 2em;
margin: 50px auto 0;
max-width: 800px;
border-radius: 15px;
-moz-border-radius: 15px;
}


.progress-bar .skill h3 { 
font-size: 1em; 
color: #fff;
left: 1em;
line-height: 1;
position: absolute;
top:1em;

}

progress { border-radius:15px; -moz-border-radius: 15px;}

.progress-bar progress, progress[role] {
-webkit-appearance: none;
-moz-appearance: none;
 appearance: none;
 background-size: auto;
 height: 50px;
 width: 100%;
 border-radius: 15px;
 -moz-border-radius: 15px;
 }



  .progress-bar .skill-list {
   list-style-type: none;
   margin: 0;
   padding: 1em;

   }

   .progress-bar .skill {
    margin-bottom: 1em;
    position: relative;
    list-style-type: none;

    }

    .progress-bar .skill ::-webkit-progress-value { 
    -webkit-animation: bar-fill 2s;
    width: 0px;
    -moz-border-radius: 15px;
    border-radius: 15px;
     }



     .progress-bar .skill-1::-webkit-progress-value {
     background: #ff9e2c;
     border-radius: 15px;
     -moz-border-radius: 15px;
     }

 .progress-bar .skill-1::-moz-progress-bar {
    background: #ff9e2c;
   border-radius: 15px;
   -moz-border-radius: 15px;
   }

  .progress-bar .skill-2::-webkit-progress-value {
  background: #4ecdc4;
  border-radius: 15px;
   -moz-border-radius: 15px;
  }

 .progress-bar .skill-2::-moz-progress-bar {
  background: #4ecdc4;
  border-radius: 15px;
 -moz-border-radius: 15px;
 }

 .progress-bar .skill-3::-webkit-progress-value {
 background: #ff6b6b;
 border-radius: 15px;
 -moz-border-radius: 15px;
 }

.progress-bar .skill-3::-moz-progress-bar {
 background: #ff6b6b;
 border-radius: 15px;
 -moz-border-radius: 15px;
 }




 @-webkit-keyframes bar-fill {
  0% { width: 0; }
 }
 @keyframes bar-fill {
 0% { width: 0; }
 }

~html

<div class="progress-bar">
<body>
<ul class="skill-list">
  <li class="skill">
    <h3>HTML/CSS</h3>
    <progress class="skill-1" max="100" value="80">
      <h2>80%</h2>
    </progress>
  </li>
  <li class="skill">
    <h3>Javascript</h3>
    <progress class="skill-2" max="100" value="45">
     <h2>45%</h2>
    </progress>
  </li>
  <li class="skill">
    <h3>PHP</h3>
    <progress class="skill-3" max="100" value="35">
      <h2>35%</h2>
    </progress>
  </li>
</ul>
</body>
</div>

【问题讨论】：

标签： html css web progress-bar

【解决方案1】：

没有 JavaScript 的干净解决方案。只有 HTML5 和 CSS3。在 Webkit 中测试：

JSFiddle Example

progress {
	display:block;
	width:100%;
	height:50px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius:50px;
	text-align: left;
	position:relative;
    font-family:"Helvetica Neue", arial, sans-serif;
    font-size:15px;
}
progress::-webkit-progress-bar {
	height:40px;
	width:80%;
	margin:0 auto;
	background-color:#dadada;
	border-radius:100px;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:40px;
	margin:0px -10px 0 0;
    padding-left:50px; /* Rounded corners requires a padding */
	background:#ff9e2c;
	border-radius:100px;
}
progress.skill-1::-webkit-progress-value {
    background:#ff9e2c;
}
progress.skill-2::-webkit-progress-value {
    background:#4ecdc4;
}
progress.skill-3::-webkit-progress-value {
    background:#ff6b6b;
}
progress:after {
	margin:-25px 0 0 -32px;
	padding:0;
	display:inline-block; /* Here is the magic to move with the progress */
	float:left;
	content: attr(value) '%';
    color:#555;

Progress width increases from 12% because the rounded corners:
<progress max="100" value="0" class="skill-1"></progress>
<progress max="100" value="15" class="skill-2"></progress>
<progress max="100" value="35" class="skill-3"></progress>
<progress max="100" value="90" class="skill-1"></progress>
<progress max="100" value="100" class="skill-2"></progress>

【讨论】：

【解决方案2】：

我建议您可以将引导程序用于进度条。

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:80%">
      HTML/CSS
  </div>
</div>
    <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
      JavaScript
  </div>
</div>
    <div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:35%">
      PHP
  </div>
</div>

看看这个小提琴。

http://jsfiddle.net/67ueLwgq/

【讨论】：

【解决方案3】：

打字稿代码：

import { Component, Input } from '@angular/core';

@Component({
  ...
})
export class ProgressBarComponent {
    @Input() percentage: number = 0;

    ...
}

组件 CSS：

.bar-background {
  position: relative;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  overflow: hidden;
  background-color: lightgray;
}

.bar-background .fill-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: red;
}

组件 HTML：

<div class="bar-background">
  <div [ngStyle]="{ transform: 'translateX(calc(-100% + ' + percentage + '%))' }" class="fill-bar">
  </div>
</div>

Stackblitz

【讨论】：