v2.5.2
Giriş yap

html css progress bar tasarımı

memdhaci
662 defa görüntülendi

html css ve js ile bir progress bar yapmak istiyorum ama nasıl yapacağımı bilmiyorum aklıma bir şey gelmiyor

munzevi
865 gün önce

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.