Deviant Login Shop
 Join deviantART for FREE Take the Tour
×



Details

Submitted on
December 30, 2013
Image Size
35.2 KB
Resolution
665×918
Link
Thumb
Embed

Stats

Views
7,982 (13 today)
Favourites
703 (who?)
Comments
97

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×
Progress Bar (for Custom box) by CypherVisor Progress Bar (for Custom box) by CypherVisor

Exclusively for Premium members and Super groups only


How to use ?


Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.



IMPORTANT NOTE!!!!


You need to install the donation pool widget in your profile for this code to work properly.




SOURCE CODE:


<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc03.deviantart.net/fs70/f/2013/364/b/f/black_by_cyphervisor-d700e9h.jpg"/></div></div></div>



INSTRUCTIONS TO USE:



Changing the progress-bar value:
You can increase or decrease the progress-bar by changing the value of the width in the above code. The value of the width should be between 0-385. Yeah, go ahead and give it a try! :)

Changing the color of the progress-bar:
Beside using the ready-made color progress bars below you can customize it to your own. All you need to do is create an image of 385x34px (.jpg or .png) and upload it to your sta.sh. After uploading it in your sta.sh you need to open the image and get the direct-image-link (check this tut on how to get your direct image link) and replace with the image in the above code. I have underlined the image code that you need to replace. And a reference image can be found here


NOTE: These progress bars are of fix width (so please don't ask me how to shorten or lengthen them).



MORE PROGRESS BAR COLORS:


Black:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc03.deviantart.net/fs70/f/2013/364/b/f/black_by_cyphervisor-d700e9h.jpg"/></div></div></div>

Blue:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc00.deviantart.net/fs71/f/2013/364/5/8/blue_by_cyphervisor-d700e9b.jpg"/></div></div></div>

White:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc02.deviantart.net/fs71/f/2013/364/2/f/white_by_cyphervisor-d700e9n.jpg"/></div></div></div>

Yellow:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc02.deviantart.net/fs70/f/2013/364/e/f/yellow_by_cyphervisor-d700e9r.jpg"/></div></div></div>

Red:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc02.deviantart.net/fs70/f/2013/364/b/1/red_by_cyphervisor-d700ea3.jpg"/></div></div></div>

Light Orange:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc09.deviantart.net/fs71/f/2013/364/d/f/lightorange_by_cyphervisor-d700dl4.jpg"/></div></div></div>

Pink:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc00.deviantart.net/fs71/f/2013/364/a/5/pink_by_cyphervisor-d700eak.jpg"/></div></div></div>

Light Green:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc06.deviantart.net/fs71/f/2013/364/a/f/lightgreen_by_cyphervisor-d700ean.jpg"/></div></div></div>

Cyan:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc06.deviantart.net/fs71/f/2013/364/3/9/cyan_by_cyphervisor-d700ear.jpg"/></div></div></div>

Green:
<div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"><br><img width="380" align="left" height="34" src="http://fc03.deviantart.net/fs71/f/2013/364/9/f/green_by_cyphervisor-d700fb7.jpg"/></div></div></div>




Get progress bars to use in your journal:


Journal CSS Progress-bar Source Code by CypherVisor




Want to customize your profile page?


Check all my free resources + tutorials: [LINK]



Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks



I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some points :points: to me as an appreciation or support.

Add a Comment:
 
:iconshelandrystudio:
This idea has made my progress so much easier for my customers. Love it. I used to use stars and percents as the way to let people know how far i was and this was something that i had been looking for. It is easy to use and the colors are bright enough to stand out on almost any background and looks great. I could never come up with this and I am glad that you are sharing your talents with the rest of us. You are a saint and much appreciated. Wish I had found you years ago. Been trying to find how to customize my profile for a long time.
What do you think?
The Artist thought this was FAIR
27 out of 27 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:icongentlemintcosmos:
GentleMintCosmos Featured By Owner May 28, 2014  Student Digital Artist
I love this idea!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 28, 2014
Thanks you... :)
Reply
:iconsassysas-777:
SassySas-777 Featured By Owner May 23, 2014  Hobbyist Traditional Artist
Is it  possible  to change pollstack's bar colour to green
with one of those codes or other one? 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 24, 2014
Ah no! You can't customize the poll bars.
Reply
:iconsassysas-777:
SassySas-777 Featured By Owner May 24, 2014  Hobbyist Traditional Artist
Oh crap :< That's quite sad 
I was hoping that it might be possible 
 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 25, 2014
hmm :hmm:
Reply
:iconlashellevalentine:
LashelleValentine Featured By Owner May 14, 2014  Student Photographer
Your resources and tutorials are so useful! You are a great person and a very important contributor :hug: Just wanted to let you know that all of your hard work is appreciated!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 15, 2014
Thank you so much. I am glad that you like my stuff! :hug:
Reply
:iconlashellevalentine:
LashelleValentine Featured By Owner May 15, 2014  Student Photographer
You are very welcome dear :huggle:
Reply
:iconself-epidemic:
Self-Epidemic Featured By Owner Apr 13, 2014  Professional Digital Artist
Thank you, I've used one of these to track the 2,000 I need to save up! D:
Reply
Add a Comment: