我想使用CSS制作一个径向进度指示器,并使其中间的圆形部分透明。请参见此处:http://codepen.io/geedmo/pen/InFfd - 这是我想要做的完美示例,但是中间的
.overlay
有背景颜色,覆盖了更大的圆圈。然而,我希望它是透明的(更大的圆圈也应该是透明的)。如何实现?<div class="wrap">
<div class="progress-radial progress-25">
<div class="overlay">25%</div>
</div>
<div class="progress-radial progress-50">
<div class="overlay">50%</div>
</div>
<div class="progress-radial progress-75">
<div class="overlay">75%</div>
</div>
<div class="progress-radial progress-90">
<div class="overlay">90%</div>
</div>
</div>
SASS:
// Colors
$barColor: tomato
$overlayColor: #fffde8
$backColor: #2f3439
@import url(http://fonts.googleapis.com/css?family=Noto+Sans)
body
padding: 30px 0
background-color: $backColor
font-family: 'Noto Sans', sans-serif
.wrap
width: 600px
margin: 0 auto
/* -------------------------------------
* Bar container
* ------------------------------------- */
.progress-radial
float: left
margin-right: 30px
position: relative
width: 100px
height: 100px
border-radius: 50%
border: 2px solid $backColor // remove gradient color
/* -------------------------------------
* Optional centered circle w/text
* ------------------------------------- */
.progress-radial .overlay
position: absolute
width: 60px
height: 60px
background-color: $overlayColor
border-radius: 50%
margin-left: 20px
margin-top: 20px
text-align: center
line-height: 60px
font-size: 16px
/* -------------------------------------
* Mixin for progress-% class
* ------------------------------------- */
$step: 5 // step of % for created classes
$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
@for $i from 0 through $loops
.progress-#{$i*$step}
@if $i < $half
$nextdeg: 90deg + ( $increment * $i )
border-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
@else
$nextdeg: -90deg + ( $increment * ( $i - $half ) )
border-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)
This is the result I'd like to get: