https://prototurk.com/soru/5808-css-scss-ic-ice-transition-kullanim-sorunu şu konudan sonra css konularından uzak duruyorum. sadece mantığı hakkında bilgi vereyim istedim yinede.

resimdeki örnek için, gradient kullanacaksınız. bunda açıda da yok, righ to şeklinde ilerlemiş. şeffaf beyaz.

bir örnek hazırladım, https://codepen.io/Munzevi/pen/NWYredZ burdan yola çıkarak devam et. resimdeki gibi istiyorsan progressbar'ın ilk divi olan ".progress" sınıfının background'u da düzenlemen gerekiyor. onuda progress-bara yaptığın arkaplanın aynın yine şeffaf, diğer rengi ise örneğin %10 opaklık da siyah olanını yapacaksın.

edit: ben hazırlarken, bir arkadaş daha hazırlamış. görsem hazırlamazdım.

Merhaba, istediğiniz özelliklere göre sizin için şöyle bir kod oluşturdum kendinize göre uyarlayabilirsiniz.
Link: https://codepen.io/House2k/pen/dymXQqv
Not: Jquery ile çalışmaktadır.

@webdoc bende biliyorum css ile yapacağımı ama çizgilerin arasında boşluklar olduğu için nasıl bir mantıkla yapmam gerektigini anlayamadım

cok basik sadece css ile kodlama yapman gerekecek ama sana tafsiyem scss kullan

@shinga bende mantığı anlayamadım zaten
ayrıca fivem nedir

javascripte gerek yok aslında ufak bi mantık yürütsen yeter

o 4 parçayı tek bi div içinde oluşturup css ile gradient ver

zannedersem söylediğin şey fivem ile alakalı