グラデーションを背景にした円形のプログレスバー

Question

私は以下の循環プログレスバーを持っています。グラデーションのグラデーションのおかげで色がちょっと荒れています（白は進歩、オレンジの残りは理想的にはバックグラウンド）：

これは、2つの円と、進度に基づいて動的に生成される角度を持つ2つの直線勾配を使用してこれを行いました。この問題は、背景色がグラデーションであることに起因します。次のように私はこのために使用するCSSは次のとおりです。

html, body { 
    background-image: linear-gradient(141deg, #e24a00 0%, #f6891f 71%, #fcb732 100%); 
    background-attachment:fixed; 
} 

    .learn-prog { 
background-image: 
     <% learn_hash = learn_degrees(@my_today_flashcards, current_user.words_per_day) %> 
     linear-gradient(<%= learn_hash[:degrees] %>deg, <%= learn_hash[:color] %> 50%, transparent 50%), 
     linear-gradient(-90deg, white 50%, transparent 50%); 
} 

learn_hashための度/着色を生成するコードは、勾配がそうでなければ、50％以上にすることはできませんので、（私はこのようにそれをしなければならなかったここにありますそれは後ろに行く）：

def color_and_degrees(decimal_completed) 
    todo_degrees = todo_degrees(decimal_completed) 
    is_over_half = ((todo_degrees/180) > 0 ? true : false) 
    if is_over_half 
     {:color => 'white', :degrees => (todo_degrees - 180)} 
    else 
     { :color => 'rgba(246, 137, 31, 1)', :degrees => todo_degrees } 
    end 
    end 

    def todo_degrees(decimal_completed) 
    degrees = (360) * (decimal_completed) 
    degrees - 90 
    end 

    def learn_degrees(todays_flashcards, words_per_day) 
    #cards_created_today/words_per_day 
    if words_per_day == 0 
     decimal_completed = 1.0 
    else 
     decimal_completed = todays_flashcards.size/words_per_day.to_f 
     decimal_completed = 1.0 if decimal_completed >= 1.0 
    end 
    color_and_degrees(decimal_completed) 
    end 

どのように色を一致させるためのアイデアは素晴らしいだろう。 感謝と歓声 マイケル

Answer 1

最も簡単な方法は、テキストと外側の青い円との間に透明な隙間を設けることです。
radial-gradient()はそれが（MDN）です。

Codepen

関連部分：それはディスクだから

background-image: radial-gradient( closest-side, white 90%, transparent 90%, transparent 95%, slateblue 95%, slateblue 100%);

closest-sideが必要とされています。放射状グラデーションのデフォルトはコーナーで100％ですが、明らかにディスクからは遠く離れているため、70.7％の誤差（対角線の半分= sqrt（2）/ 2）の後にグラデーションが表示されません。

私はあなたの円形プログレスバーを追加しませんでしたが、私はそれはまだmultibackgroundとうまく動作します願っています:)

デモ：私はあなたのすべてのビットを把握していなかった

html, body { 
 
    background-image: linear-gradient(141deg, #e24a00 0%, #f6891f 71%, #fcb732 100%); 
 
    background-attachment:fixed; 
 
} 
 

 
    .learn-prog { 
 
     display: flex; /* centering text */ 
 
     justify-content: center; 
 
     align-items: center; 
 
     border-radius: 50%; 
 
     width: 400px; 
 
     height: 400px; 
 
background-image: 
 
     radial-gradient(closest-side, white 90%, transparent 90%, transparent 95%, slateblue 95%, slateblue 100%); 
 
     border: 1px solid #000; /* visualize boundary of elements */ 
 
}

<div class="learn-prog">HELLO</div> 
 

 
<div class="learn-prog" style="margin-left: auto">MOVE</div>