1. Home
  2. Docs
  3. Confluence
  4. Confluence User Macros
  5. Bootstrap Progress Bar

Bootstrap Progress Bar

Summary

This set of Confluence user macro adds a Bootstrap like progress to your page, offering different color and animation options.

You need to add two macros to your page. One provides the stylesheet, the other (and you can use more than one on the page then) the progress bar itself.

Source Code

Stylesheet

#* ============================================================================
 * BOOTSTRAP PROGRESS BAR STYLES
 *
 * This Confluence user macro is needed once on each page where you want to use
 * the Bootstrap Progress Bar macro.
 *
 * Version: 1.0.002
 * Date:    2017-02-12
 * Author:  George Lewe
 * Source:  https://github.com/glewe/bootstrap-progressbar
 * License: GNU LGPLv3
 *
 * Macro body:      None
 * Body processing: None
 *#</pre>
#* ----------------------------------------------------------------------------
* PARAMETER
*#
## @noparams

#* ----------------------------------------------------------------------------
* STYLES
*#
<style type="text/css">

@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}

@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}

.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #ffffff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}

.progress-striped .progress-bar {
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);
background-size: 40px 40px;
}

.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar-success {
background-color: #5cb85c;
}

.progress-striped .progress-bar-success {
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);
}

.progress-bar-info {
background-color: #5bc0de;
}

.progress-striped .progress-bar-info {
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);
}

.progress-bar-warning {
background-color: #f0ad4e;
}

.progress-striped .progress-bar-warning {
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);
}

.progress-bar-danger {
background-color: #d9534f;
}

.progress-striped .progress-bar-danger {
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);
}

</style>

Progress bar Macro


#* ============================================================================
* BOOTSTRAP PROGRESS BAR
*
* This Confluence user macro adds a Bootstrap like progress bar to your page.
* Requires the bootstrap-progress-bar-styles macro once on that page.
*
* Version: 1.0.001
* Date: 2016-11-17
* Author: George Lewe
* Source: https://bitbucket.org/georgelewe/bootstrap-progress-bar
* License: GNU LGPLv3
*
* Macro body: None
* Body processing: None
*#

#* ----------------------------------------------------------------------------
* PARAMETER
*#
## @param Progress:title=Progress|type=string|required=true|desc=Type in the percentage of the progress here as a number between 1 and 100.|default=50
## @param Color:title=Color|type=enum|enumValues=Blue,Cyan,Green,Orange,Red|desc=Select the progress bar color here.|default=Blue
## @param Style:title=Style|type=enum|enumValues=Plain,Striped,Animated|desc=Select the progress bar style here.|default=Plain
## @param Width:title=Width|type=string|desc=Enter the width in pixel here or use 'Auto' for auto width.|default=Auto
## @param Height:title=Height|type=string|desc=Enter the height in pixel here or use 'Auto' for auto height.|default=Auto

#* ----------------------------------------------------------------------------
* PROCESS INPUT
*#
#if (!$paramProgress)
#set ($paramProgress="50")
#end

#set ($paramBarColor="")
#if ($paramColor=="Cyan")
#set ($paramBarColor=" progress-bar-info")
#elseif ($paramColor=="Green")
#set ($paramBarColor=" progress-bar-success")
#elseif ($paramColor=="Orange")
#set ($paramBarColor=" progress-bar-warning")
#elseif ($paramColor=="Red")
#set ($paramBarColor=" progress-bar-danger")
#end

#set ($paramBarStyle="")
#if ($paramStyle=="Striped")
#set ($paramBarStyle=" progress-striped")
#elseif ($paramStyle=="Animated")
#set ($paramBarStyle=" progress-striped active")
#end

#if ($paramWidth=="Auto")
#set ($paramBarWidth="")
#else
#set ($paramBarWidth="width:"+$paramWidth+"px;")
#end

#if ($paramHeight=="Auto")
#set ($paramBarHeight="")
#else
#set ($paramBarHeight="height:"+$paramHeight+"px;")
#end

#* ----------------------------------------------------------------------------
* OUTPUT
*#
<div class="progress$paramBarStyle" style="margin-bottom: 9px; $paramBarWidth $paramBarHeight">
<div class="progress-bar$paramBarColor" style="width: $paramProgress%"></div>
</div>
Was this article helpful to you? Yes No

Leave a Reply

Your email address will not be published. Required fields are marked *