CypherVisor on DeviantArthttp://creativecommons.org/licenses/by-nc-nd/3.0/https://www.deviantart.com/cyphervisor/art/Progress-Bar-for-Custom-box-423288036CypherVisor

Deviation Actions

CypherVisor's avatar

Progress Bar (for Custom box)

By
Published:
48.2K Views

Description


»»»»»»»»»»»»»»»»»»»»»»»»»»» 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.

Image size
665x918px 35.2 KB
Comments141
Join the community to add your comment. Already a deviant? Log In
ShelandryStudio's avatar
:star::star::star::star::star: Overall
:star::star::star::star::star: Vision
:star::star::star::star::star: Originality
:star::star::star::star::star: Technique
:star::star::star::star::star: Impact

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.