User Guide Cancel

cfprogressbar

Last updated on May 30, 2024 | Also applies to ColdFusion

ColdFusion

Open app

CFML Reference User Guide
ColdFusion functions
ColdFusion Tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

Description

Defines a progress bar to indicate the progress of an activity such as a file download.

Syntax

<cfprogressbar 
autoDisplay="true|false" 
name="control identifier" 
bind ="bind expression" 
duration="time value" 
height="height in pixels" 
interval="time in milliseconds" 
onComplete="function name" 
onError="JavaScript function name" 
style="style specification" 
width="pixel value" >

History

ColdFusion 9: Added this tag.

Attributes

Attribute	Req/Opt	Default	Description
autoDisplay	Optional	true	Set to true to display the progress bar.
name	Required		The control name. Used to refer to the control in JavaScript, for example in the script that starts the progress.
bind	Required if duration is not specified		A bind expression specifying a client JavaScript function or server CFC that the control calls to get progress information each time the period defined by the interval attribute elapses. You cannot use this attribute with a duration attribute. If an error occurs, no further bind expression calls are triggered and onError is called (if defined).
duration	Required if bind is not specified		The time, in milliseconds, between when the bar starts showing progress and when it shows completed progress. Use only on automatic progress bars that do not use a bind expression to get actual progress information. You cannot use this attribute with a bind attribute.
height	Optional		Height of the bar in pixels.
interval	Optional	1000	Used if duration is specified. The time interval, in milliseconds, at which the progress bar updates. Although this attribute is optional, specify it to prevent the bar from updating frequently.
onComplete	Optional		The name of a function to call when progress completes.
onError			Applies only if you use bind. The JavaScript function to run on an error condition. The error can be a network error or server-side error.
style	Optional		The following are the supported colors: bgcolor: The background color for the progress bar. A hexadecimal value without "#" prefixed. textcolor: Text color on progress bar. progresscolor: Color used to indicate the progress.
width	Optional	400	The width (length) of the bar in pixels.

Usage

A progress bar has one of two behaviors:

Manual, where the progress indicator length increases steadily over a time specified by the duration attribute.
Dynamic, where the bind attribute specifies a function that determines the indicator length.
If you use a bind expression, the called function takes no parameters, and must return a structure with two values:
status - A decimal completion value, in the range 0 -1.0
message - A message to display in the progress bar, such as "Loading..." or "Completed".
You use two Ajax functions to start and stop the progress bar:

ColdFusion.ProgressBar.start(barName) 
ColdFusion.ProgressBar.stop(barName)

You must call the start method to start the progress bar. You call the stop method to explicitly stop the progress bar. The bar stops automatically when the bind method returns a status value of 1 or the period specified by the duration attribute elapses. Therefore, you need to use this method only if a process does not complete, if the process completes before the duration period, or in other nonstandard situations, such as error conditions.

Example

The following uses a simple comment form, and uses a timer to simulate the time it would take to process the form. The Application.cfc page must enable session management.
The main application page contains the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
</head> 

<script type="text/javascript"> 
// The function that starts the progress bar, 
// called when the user clicks the Send comment button. 
function startProgress() { 
ColdFusion.ProgressBar.start("mydataProgressbar"); 
}; 

// The function called when the progress bar finishes, 
// specified by the cfprogressbar tag onComplete attribute. 
function onfinish() { 
alert("Done"); 
}; 
</script> 

<body> 
<!--- Ensure there is no Session.STATUS value, which is used by 
the progress bar bind CFC, when the page displays. ---> 
<cfif IsDefined("Session.STATUS")> 
<cfscript> 
StructDelete(Session,"STATUS"); 
</cfscript> 
</cfif> 

<!--- For code simplicity, formatting is minimal. ---> 
<cfform name="kitform"> 
<p>To make our service better and to benefit from our special offers, 
take a moment to give us your email address and send us a comment.</p> 
<p>Name:<br /> 
&nbsp;<cfinput type="text" name="name"> </p> 
<p>E-mail:<br /> 
&nbsp;<cfinput type="text" name="email"> </p> 
<p>Comment:<br /> 
&nbsp;<cftextarea name="cmnt"/></p> 
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<cfinput type="button" name="" value="Send Comment" 
onClick=startProgress()></p> 
<!--- The progressbar control ---> 
<div style="padding-left:3px" > 
<cfprogressbar name="mydataProgressbar" 
bind="cfc:mycfc.getstatus()" 
interval="1700" 
width="200" 
oncomplete="onfinish"/> 
</div> 

</cfform> 
</body> 
</html>

The mycfc.cfc file has a single getstatus function:

<cfcomponent> 
<!--- This function simulates the time taken 
by and operation by using sleep functions. 
It increments the progressbar status by 1/10 each time the 
progressbar bind expression calls it (that is, each time the 
time specified by the cfprogressbar interval attribute passes. 
---> 
<cffunction name="getstatus" access="remote"> 
<cfset str = StructNew()> 
<cfset str.message = "Saving Data"> 
<cfif NOT IsDefined("session.STATUS")> 
<cfset session.STATUS = 0.1> 
<cfscript> 
Sleep(200); 
</cfscript> 
<cfelseif session.STATUS LT 0.9> 
<cfset session.STATUS=session.STATUS + .1> 
<cfscript> 
Sleep(200); 
</cfscript> 
<cfelse> 
<cfset str.message = "Done..."> 
<cfset session.STATUS="1.0"> 
</cfif> 
<cfset str.status = session.STATUS> 
<cfreturn str> 
</cffunction> 

</cfcomponent>

Get help faster and easier

New user?