Suggestion: Bootstrap loading bars

[Alexander Nicholi]

Specifically, these. In BBCode, particularly for your ROM hacking community.

I'm sure us hackers (and true blue software devs too) would really like to have this for progress information and the like – I've even seen a few hacks crudely implement it in text.

 

[Lycanthropy]

A bit of CSS can imitate those progress bars nicely, so I don't think it would be really necessary.
For example:

75%​

[PLAIN][cd=background-color:#0000D6;width:400px;height:20px;border-radius:5px][cd=float:left;background-color:#000090;width:300px;height:20px;border-radius:5px 0px 0px 5px][center][COLOR="White"]75%[/COLOR][/center][/cd][/cd][/PLAIN]

 

[ruby]

In fact all that is, is CSS. (the first one at least) You could copy it over here verbatim:

70%

[PLAIN][cd="width:50%; height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-o-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)"][cd="float:left;width:70%;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-o-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-moz-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease"]70%[/cd][/cd][/PLAIN]

Not that it wouldn't make a good little BBCode!

<div class="progressbar" style="width:50%; height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-o-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)"><div class="nopercent" style="float:left;width:{param}%;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-o-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .{param}s ease;-moz-transition:width .{param}s ease;-o-transition:width .{param}s ease;transition:width .{param}s ease">{param}%</div></div>

Example:

[progress]70[/progress]

 

[gimmepie]

I think that could be quite handy to a few of our users, so if it is easy enough to implement I don't see why not. If it is going to be troublesome for the h-staff to code though, then it really shouldn't be too hard to just CSS it as Lycan and Josephine did.

 

[Lycanthropy]

If they're needed that badly in ROM Hacking it's always possible to put a template somewhere in the section.

 

[Circuit]

They could be used outside of ROM hacking though, in many places. ROM Hacking isn't the only place that has projects going on, and I think these loading bars could be a useful little addition to many users across the forums. I'd like to see them implemented, if possible.

 

[Abnegation]

If they're needed that badly in ROM Hacking it's always possible to put a template somewhere in the section.

Or just add a BB code because that's the most user friendly thing to do. Once again, the code already exists (on Bootstrap) and requires minimal effort for implementation. There's no need to shoot down an idea simply because it has a workaround. Not everyone knows, or has the desire to know web languages. So I personally would rather the forum not force that upon them if possible.

 

[ruby]

Hehehe, If you were to add this to the footer of PC's master style:

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$('.progressbar > div').each(function(){
    this.removeAttribute("class")
});
</script>

and this just above .audyfont in headinclude:

.nopercent {
    width: 0% !important;
}

the code I posted before would have a little fill up animation too :) and the speed it fills is set by {param}!

 

[Lycanthropy]

Or just add a BB code because that's the most user friendly thing to do. Once again, the code already exists (on Bootstrap) and requires minimal effort for implementation. There's no need to shoot down an idea simply because it has a workaround. Not everyone knows, or has the desire to know web languages. So I personally would rather the forum not force that upon them if possible.

Okay, fair enough. I was thinking hacks for example needed smaller bars in a summary of the progress of different aspects (scrips, maps, sprites, ...), while you want a larger bar if you show the progress of one thing in general. But own CSS could always be used to style after all. If it's indeed as easy to implement as mentioned above, why not?

 

[ruby]

Another version of the tag using {option} in place of the inside div's background colour could be nice.

I'd be against having just that one, though. having to set a colour would be a pain imo.

And width and height? prolly never happening. You only get one {option} so

You could change the width with a little css wrapped around the tags though, like this:

70%

[PLAIN][cd="width:100%; overflow:hidden;"][cd="width:200%;"][progress]70[/progress][/cd][/cd][/PLAIN]

or like this:

70%

[PLAIN][cd="width:50%; overflow:hidden;"][cd="width:100%;"][progress]70[/progress][/cd][/cd][/PLAIN]

 

[gimmepie]

Audy those look fantastic!

 

[destinedjagold]

-snip-

Those are really nice! But maybe you should also add width? Like this...

[progress-green="progress: 68; width: 50%;"]test[/progress-green]

or

[progress-green=68;250px]test[/progress-green]