# upload progress bar color customization

**URL:** <https://community.transloadit.com/t/upload-progress-bar-color-customization/18221>\
**Category:** Transloadit\
**Tags:** tender-archive\
**Created:** [November 17, 2013, 7:11pm UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221 "2013-11-17T19:11:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francisco\_Azevedo](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/francisco_azevedo/32/1632_2.png) [@Francisco\_Azevedo](https://community.transloadit.com/u/Francisco_Azevedo)\
**Post date:** [November 17, 2013, 7:11pm UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/1 "2013-11-17T19:11:00Z")

</div>

> Archived from the Transloadit support forum. Originally posted on November 17, 2013; details may be outdated, see [our docs](https://transloadit.com/docs/) for current behavior. [Original thread](https://web.archive.org/web/20131123115846/http://support.transloadit.com/discussions/questions/8334-upload-progress-bar-color-customization)

Hi all,  
What’s the best way to customize the upload progress bar color?

best,

---

<div class="post-metadata">

**Author:** ![tim-kos](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tim-kos](https://community.transloadit.com/u/tim-kos)\
**Post date:** [November 18, 2013, 9:09am UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/2 "2013-11-18T09:09:00Z")

</div>

Hey Francisco,

please have a look at [https://github.com/transloadit/jquery-sdk/blob/master/css/transloadit2.css#L142](https://github.com/transloadit/jquery-sdk/blob/master/css/transloadit2.css#L142)

These are the css properties that you need to overwrite in your own css.

Kind regards,  
Tim

Co-Founder Transloadit  
@tim\_kos

---

<div class="post-metadata">

**Author:** ![Francisco\_Azevedo](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/francisco_azevedo/32/1632_2.png) [@Francisco\_Azevedo](https://community.transloadit.com/u/Francisco_Azevedo)\
**Post date:** [November 18, 2013, 10:31am UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/3 "2013-11-18T10:31:00Z")

</div>

Hi Tim,  
Just found how to specify color.  
We just need to specify 2 colors of progress bar.  
Here goes my example to turn progress bar color orange:

@@@  
..js transloadit script file..

```auto
<style>
#transloadit .progress .bar {
background-color: #FC5B25;
}

```

```auto
 #transloadit .progress-striped .bar {
background-color: #F75016;
}
</style>

```

@@@

btw, tim can you look to my latest sugestion/feature-request about quota support?

best,  
Francisco Azevedo

---

<div class="post-metadata">

**Author:** ![tim-kos](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tim-kos](https://community.transloadit.com/u/tim-kos)\
**Post date:** [November 21, 2013, 8:30am UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/4 "2013-11-21T08:30:00Z")

</div>

Can you please link me to the new ticket here?

---

<div class="post-metadata">

**Author:** ![Francisco\_Azevedo](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/francisco_azevedo/32/1632_2.png) [@Francisco\_Azevedo](https://community.transloadit.com/u/Francisco_Azevedo)\
**Post date:** [November 21, 2013, 8:39am UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/5 "2013-11-21T08:39:00Z")

</div>

Tim, maybe on spam? i don’t see ticket too.

---

<div class="post-metadata">

**Author:** ![tim-kos](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tim-kos](https://community.transloadit.com/u/tim-kos)\
**Post date:** [November 21, 2013, 2:58pm UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/6 "2013-11-21T14:58:00Z")

</div>

I restored it and replied there, it was in fact in spam.

Closing this now.

---

<div class="post-metadata">

**Author:** ![Francisco\_Azevedo](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/francisco_azevedo/32/1632_2.png) [@Francisco\_Azevedo](https://community.transloadit.com/u/Francisco_Azevedo)\
**Post date:** [November 22, 2013, 2:11pm UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/7 "2013-11-22T14:11:00Z")

</div>

Tim,  
Next issue is not related to this ticket but to progress percentage crazy values.

Don’t forget to [update jquery docs](https://transloadit.com/docs#jquery-plugin) to use v2.2.1.

best,  
Francisco Azevedo

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex032/uploads/transloadit/original/1X/04ee57da0cb7ac8728a9ac5965c288164f4ce280.svg) [@system](https://community.transloadit.com/u/system)\
**Post date:** [October 7, 2026, 10:36am UTC](https://community.transloadit.com/t/upload-progress-bar-color-customization/18221/8 "2026-10-07T10:36:51Z")

</div>