A következő kör alakú folyamatjelző sávom van, aminek a színezése a háttér gradiensnek köszönhetően kicsit elrontott (a fehér az előrehaladás, a narancs többi része ideális esetben a háttérrel azonos): 
< /a>
Ezt úgy készítettem el, hogy két kört és a külső körön két lineáris gradienst használtam, amelyek fokozatai a haladás alapján dinamikusan generálódnak. A probléma abból adódik, hogy a háttérszín maga is színátmenet. Az általam használt css a következő:
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%);
}
Itt van a kód, ami a learning_hash fokozatait / színezését generálja (ezt így kellett csinálnom, mert a gradiens nem lehet több 50%-nál, különben visszafelé indul):
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
Bármilyen ötlet a színek összeegyeztetésére jó lenne. Köszönöm és egészséget, Michael
