How To

23 Nov 201711 minutes to read

How to increment & show the progressbar movement

You can increment the progress percentage and show case the movement by using the below code with the help of change, complete and start events.

HTML

<div class="frame">
            <div class="control">
                <div id="progressBar"></div>
            </div>
            <div class="startButton">
                <input type="checkbox" id="startButton" />
                 <label for="startButton">Toggle</label>
            </div>
        </div>  
         <div class="cols-prop-area event-tracer">
                    <div class="heading">
                        <span>Event Trace</span>
                        <div class="pull-right">
                            <select name="selectevtprops" id="selectControls">
                                <option value="start">start</option>
                                <option value="complete">complete</option>
                                <option value="change">change</option>
                            </select>
                        </div>
                    </div>
					<div class="prop-grid content">
						<div class="eventarea">
							<div class="EventLog" id="EventLog">
							</div>
						</div>
						<div class="evtbtn">
							<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
						</div>
					</div>    
            </div>

JAVASCRIPT

var progressObj, buttonObj, k = 10, timer = window.clearInterval(timer),showComplete=true ;
        $(function () {
            // declaration
            $("#progressBar").ejProgressBar({
                height: 22,
                value: 10,
                start: "onStart",
                change: "onChange",
                complete: "completed"
            });
            progressObj = $("#progressBar").data("ejProgressBar");
            progressObj.option("text", progressObj.getPercentage() + " %");

            $("#startButton").ejToggleButton({
                defaultText: "Start",
                activeText: "Pause",
                size: "small",
                click: "startProcess"
            });
            buttonObj = $("#startButton").data("ejToggleButton");

            $("#selectControls").ejDropDownList({
                popupShown: "adjustPopUpPosition",
                showCheckbox: true,
                checkAll: true,
                change: "propCheckEvent"
            });
        });

        function propCheckEvent(args) {
            if (args.isChecked) {
                switch (args.value) {
                    case "start": progressObj.option(args.value, "onStart"); break;
                    case "change": progressObj.option(args.value, "onChange"); break;
                    case "complete": showComplete=true; break;
                }
            }
            else if(args.value=="complete") 
			{             
                 showComplete=false; 
            }
            else
			   progressObj.option(args.value, null)            
        }

        function startProcess(args) {
            if (args.isChecked) 
                timer = window.setInterval(draw, 100);
            else {
                buttonObj.setModel({ "defaultText": "Start" });
                timer = window.clearInterval(timer);
            }
        }
        function draw() {
            progressObj.option("text", ++k + " %");
            progressObj.option("percentage", k);
        }
        function completed(args) {
            progressObj.option("text", "Completed");
            timer = window.clearInterval(timer);
            k = 0;
            if(showComplete)
            onComplete(args);
            buttonObj.setModel({ "toggleState": false, "defaultText": "Restart" });
        }

        function onComplete(args) {
                jQuery.addEventLog("The process has been <span class='eventTitle'>completed</span> successfully.</br>");
        }
        function onStart(args) {
            jQuery.addEventLog("Progressbar has been <span class='eventTitle'>started</span>.</br>");
        }
        function onChange(args) {
            jQuery.addEventLog("Progressbar value has been <span class='eventTitle'>changed</span> to " + args.percentage + "%.</br>");
        }
        function onClear() {
            $("#EventLog").html("");
        }

CSS

<style type="text/css" class="cssStyles">
        .frame {
            border: 1px solid #BBBCBB;
            border-radius: 10px 10px 10px 10px;
            padding: 50px 60px;
            margin-top: 40px;
            width: 400px;
            }
       
        .txt {
           font-size: 20px;
           margin-top: 12px;
           text-align: center;
           }
        .startButton {
             margin-left: 155px;
           }
    </style>

The progress bar movement will be as shown below: