BBCode DatabaseProgress BBcode

BBCode's
Previous topicNext topic
User avatar

Topic Author
dmzx
Founder
Founder
Status: Online
User theme: Dark
Posts: 6292
Joined: Jan 13th, '14, 20:45
    Windows 10 Chrome

Progress BBcode

Post by dmzx »

Progress BBcode to show status of project.

BBcode:

Code: Select all

[progress={NUMBER}]{INTTEXT1}[/progress]
HTML:

Code: Select all

<br /><span style="color: purple;font-size: 120%;font-weight: bold;margin-left: 10px">Progress:</span> <strong><i>{INTTEXT1}</strong></i> <div style="width: 300px;background: #B4B8BC;-webkit-border-radius: 16px;-o-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;box-shadow: 3px 3px 3px #444;border: 1px solid #ccc;padding: 4px;margin: 6px"><div style="height: 18px;background: #E4E5E8;-webkit-border-radius: 16px;-o-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;border: 1px solid #999;padding: 3px"><div style="float: left;width: 238px;-webkit-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;border: 1px solid #999;padding-right:7px;margin-left: 2px;height: 12px;margin: 2px 0;background: -webkit-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: -o-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: -moz-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);"><span style="float: left;margin: -1px 0; height:6px; width:{NUMBER}%; max-width: 237px;background: -moz-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));background: -webkit-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: -o-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: -ms-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: radial-gradient(ellipse at center,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 );-webkit-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;border: 1px solid #999;padding: 3px"></span></div><span style="margin-right: 4px;float: right;font-size: 1.2em">{NUMBER}%</span></div></div>
Help line:

Code: Select all

[progress=25]Something[/progress]
Display on posting page: yes

Will output:

Progress: Something
25%
User avatar

davidmccl2
Users
Users
Status: Offline
User theme: Dark
Posts: 40
Joined: Feb 21st, '16, 01:00
    Windows 10 Firefox

Re: Progress BBcode

Post by davidmccl2 »

Thanks man!
Image
User avatar

davidmccl2
Users
Users
Status: Offline
User theme: Dark
Posts: 40
Joined: Feb 21st, '16, 01:00
    Windows 10 Firefox

Re: Progress BBcode

Post by davidmccl2 »

Useage

Code: Select all

[progress]{NUMBER}[/progress]
Html

Code: Select all

<style> @-webkit-keyframes progress{to{background-position: 30px 0;}}@-moz-keyframes progress{to{background-position: 30px 0;}}@keyframes progress{to{background-position: 30px 0;}} </style><div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: CornflowerBlue; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>
Help Line

Code: Select all

[progress]Number from 1 to 100[/progress]
Will give you animated Progress bar
User avatar

Sniper_E
VIP
VIP
Status: Offline
User theme: Dark
Posts: 1127
Joined: Oct 14th, '14, 17:01
    Windows 10 Firefox

Re: Progress BBcode

Post by Sniper_E »

dmzx wrote: Aug 10th, '16, 19:29Progress BBcode to show status of project.
Your progress bar has a shadow and the shadow is cut off at the bottom.
In your html replacement you may need a margin around the bar and then the title will need a margin-left to line up with the bar.

Code: Select all

<br /><span style="color: purple;font-size: 120%;font-weight: bold;margin-left: 10px">Progress:</span> <strong><i>{INTTEXT1}</strong></i> <div style="width: 300px;background: #B4B8BC;-webkit-border-radius: 16px;-o-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;box-shadow: 3px 3px 3px #444;border: 1px solid #ccc;padding: 4px;margin: 6px"><div style="height: 18px;background: #E4E5E8;-webkit-border-radius: 16px;-o-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;border: 1px solid #999;padding: 3px"><div style="float: left;width: 238px;-webkit-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;border: 1px solid #999;padding-right:7px;margin-left: 2px;height: 12px;margin: 2px 0;background: -webkit-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: -o-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: -moz-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);"><span style="float: left;margin: -1px 0; height:6px; width:{NUMBER}%; max-width: 237px;background: -moz-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));background: -webkit-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: -o-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: -ms-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: radial-gradient(ellipse at center,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 );-webkit-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;border: 1px solid #999;padding: 3px"></span></div><span style="margin-right: 4px;float: right;font-size: 1.2em">{NUMBER}%</span></div></div>
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™
User avatar

Topic Author
dmzx
Founder
Founder
Status: Online
User theme: Dark
Posts: 6292
Joined: Jan 13th, '14, 20:45
    Windows 10 Chrome

Re: Progress BBcode

Post by dmzx »

Sniper_E wrote: Oct 9th, '16, 18:28
dmzx wrote: Aug 10th, '16, 19:29Progress BBcode to show status of project.
Your progress bar has a shadow and the shadow is cut off at the bottom.
In your html replacement you may need a margin around the bar and then the title will need a margin-left to line up with the bar.

Code: Select all

<br /><span style="color: purple;font-size: 120%;font-weight: bold;margin-left: 10px">Progress:</span> <strong><i>{INTTEXT1}</strong></i> <div style="width: 300px;background: #B4B8BC;-webkit-border-radius: 16px;-o-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;box-shadow: 3px 3px 3px #444;border: 1px solid #ccc;padding: 4px;margin: 6px"><div style="height: 18px;background: #E4E5E8;-webkit-border-radius: 16px;-o-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;border: 1px solid #999;padding: 3px"><div style="float: left;width: 238px;-webkit-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;border: 1px solid #999;padding-right:7px;margin-left: 2px;height: 12px;margin: 2px 0;background: -webkit-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: -o-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: -moz-linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);background: linear-gradient(#A8A8A8, #DBDBDB, #E4E4E4);"><span style="float: left;margin: -1px 0; height:6px; width:{NUMBER}%; max-width: 237px;background: -moz-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));background: -webkit-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: -o-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: -ms-radial-gradient(center, ellipse cover,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);background: radial-gradient(ellipse at center,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 );-webkit-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;border: 1px solid #999;padding: 3px"></span></div><span style="margin-right: 4px;float: right;font-size: 1.2em">{NUMBER}%</span></div></div>
:thumbup: added
User avatar

Superl
Users
Users
Status: Offline
User theme: Dark
Posts: 43
Joined: Dec 3rd, '15, 23:19
    Windows 10 Firefox

Re: Progress BBcode

Post by Superl »

davidmccl2 wrote: Aug 15th, '16, 01:09 Useage

Code: Select all

[progress]{NUMBER}[/progress]
Html

Code: Select all

<style> @-webkit-keyframes progress{to{background-position: 30px 0;}}@-moz-keyframes progress{to{background-position: 30px 0;}}@keyframes progress{to{background-position: 30px 0;}} </style><div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: CornflowerBlue; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>
Help Line

Code: Select all

[progress]Number from 1 to 100[/progress]
Will give you animated Progress bar
Doesn't work for me on 3.2
Previous topicNext topic