Shop More Submit  Join Login
×




Details

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

Stats

Views
10,879 (8 today)
Favourites
854 (who?)
Comments
102

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
34 out of 34 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconflip-cobbler:
Flip-Cobbler Featured By Owner Oct 25, 2014  Hobbyist Digital Artist
Is there any way to make this into the donation pool? For example, could you put a donate button on it and have it work?
Reply
:iconorioniszeta:
OrionisZeta Featured By Owner Aug 27, 2014  Hobbyist Artist
Thank you, your awesome, have a good day :D
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Aug 27, 2014
Yw :hug:
Reply
:iconkeiji-ne:
keiji-ne Featured By Owner Aug 22, 2014
thank you very much for providing so many wonderful resources for everyone! ;v; all of your hard work is very appreciated, in fact, my whole page is customized thanks to you! 2. Love  thanks so much! 14. Smile 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Aug 23, 2014
It's my pleasure dear. :hug:
Reply
:iconsuetchisaihoshi:
SuetchiSaihoshi Featured By Owner May 28, 2014  Student General Artist
I love this idea!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 28, 2014
Thanks you... :)
Reply
:iconsass-haunted:
Sass-Haunted 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
:iconsass-haunted:
Sass-Haunted Featured By Owner May 24, 2014  Hobbyist Traditional Artist
Oh crap :< That's quite sad 
I was hoping that it might be possible 
 
Reply
Add a Comment: