BoxLang 🚀 - Dynamic : Modular : Productive! Learn More...

Simple CSS Progress Bar

v1.0 Plugins
This plugin is used for displaying a simple css progress bar
The look can be altered by creating a classes and setting progress_style_override=true in the config file
This would render a progress bar
#getMyPlugin("progress").renderit(8,10,"test bar")#
that looks like this
Arguments for the renderit function:
currentStep: REQUIRED The current step of the process whos progress your tracking.
totalSteps: REQUIRED The total number of steps in the process whos progress your tracking
progressText: Additional helper text for your progress bar, besides the Step x of y.
showHelperText: Flag to display any helper text.  Default is true and displays text.
With addition helper text
#getMyPlugin("progress").renderit(8,10,"test bar")#
With just "Step 8 of 10" helper text
With no helper text, and just the bar
ColdBox Settings
To override the styles, set progress_style_override=true in your coldbox config file
// custom settings
settings = {
CSS Classes
.progress-container - container for the progress bar
.progress-text-container - container for the helper text
#progress_text - id of the span that contains the helper text
Drop in your plugins folder or coldbox extensions location
  •   Curt Gratz
  • Published
  • 1.0 is the latest of 1 release(s)
  • Published on {{ getFullDate("2016-06-10T08:13:27Z") }}

$ box install Simple-CSS-Progress-Bar

No collaborators yet.
4.88 / 8
  • {{ getFullDate("2010-03-19T14:47:17Z") }}
  • {{ getFullDate("2016-06-10T08:13:27Z") }}
  • 10,624
  • 5,033