Progressbar

Basic setup tour consisting of 3 steps with a progressbar that is managed by the 'onProgress' callback function.

 

More help: Progressbar

Trigger(s)

Run power tour (trigger)

Example blocks

Demo box 1

(hookTo)

Demo box 2

(hookTo)

Demo box 3

(hookTo)

Source code

Install | Documentation 
<!-- PowerTour core stylesheet(required) -->        
<link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>

<!-- PowerTour styling stylesheet (optional) -->
<link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>

<!-- CSS3 animations stylesheet(needed for animations) -->
<link rel="stylesheet" href="css/powertour/animate.min.css"/>

<!-- jQuery core (required) -->
<script src="js/assets/jquery-1.12.3.min.js"></script>

<!-- PowerTour plugin (required) -->
<script src="js/powertour/powertour.lite.3.1.0.min.js"></script>


Setup | Documentation 
$.powerTour({
    tours : [
        {
            trigger            : '#powertour-demo-trigger-id',
            startWith          : 1,
            easyCancel         : true,
            escKeyCancel       : true,
            scrollHorizontal   : false,
            keyboardNavigation : true,
            loopTour           : false,
            highlightStartSpeed: 200,
            highlightEndSpeed  : 200,
            onStartTour        : function(ui){
                
                // show the progressbar               
                $('#progressbar').show();	
    
            },
            onEndTour          : function(ui){
                
                // progressbar hide and reset
                $('#progressbar')
                .hide()
                .children('#bar')
                .children()
                .width(0)
                .next()
                .text('loading...');
    
            },	
            onProgress         : function(ui){
                
                // variables
                var i       = ui.stepIndex;
                var total   = ui.totalSteps;
                var barSize = 100 / total * i+'%';
                
                // run progressbar
                $('#text')
                .html('<span>'+i+'</span>/'+total+'')
                .prev('#bar')
                .children()
                .animate({width: barSize},400);
    
            },
            steps : [
                  {
                      hookTo          : '#powertour-demo-box-1',
                      content         : '#step-id-1',
                      width           : 400,
                      position        : 'bm',
                      offsetY         : 20,
                      offsetX         : 0,
                      fxIn            : 'flipInX',
                      fxOut           : 'bounceOutLeft',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-box-2',
                      content         : '#step-id-2',
                      width           : 300,
                      position        : 'lt',
                      offsetY         : 0,
                      offsetX         : 20,
                      fxIn            : 'fadeIn',
                      fxOut           : 'fadeOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : true,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-box-3',
                      content         : '#step-id-3',
                      width           : 400,
                      position        : 'tr',
                      offsetY         : -80,
                      offsetX         : 40,
                      fxIn            : 'rotateIn',
                      fxOut           : 'rotateOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  }		
            ]
        }
    ]
});


Trigger(s) | Documentation 
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>


Steps | Documentation 
<div class="single-step" id="step-id-1">
    <h3>Step one</h3>
    <p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
    <br/>
    <a href="#" data-powertour-action="next">Next step...</a>
</div>

<div class="single-step" id="step-id-2">
    <h3>Step two</h3>
    <p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
    <br/>
    <a href="#" data-powertour-action="prev">Prev step</a>
    <a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>

<div class="single-step" id="step-id-3">
    <h3>Step three</h3>
    <p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
    <br/>
    <a href="#" data-powertour-action="prev">Prev step...</a>
    <a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>


Progressbar 
<div id="progressbar">
    <div id="bar">
        <span></span>
    </div>
    <div id="text"></div>
</div>


Complete 
<html>
<head>       
        
    <!-- PowerTour core stylesheet(required) -->        
    <link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>
    
    <!-- PowerTour styling stylesheet (optional) -->
    <link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>
    
    <!-- CSS3 animations stylesheet(needed for animations) -->
    <link rel="stylesheet" href="css/powertour/animate.min.css"/>
    
    <!-- jQuery core (required) -->
    <script src="js/assets/jquery-1.12.3.min.js"></script>
    
    <!-- PowerTour plugin (required) -->
    <script src="js/powertour/powertour.lite.3.1.0.min.js"></script>

    <script>	
        $(document).ready(function($){
            $.powerTour({
                tours : [
                    {
                        trigger            : '#powertour-demo-trigger-id',
                        startWith          : 1,
                        easyCancel         : true,
                        escKeyCancel       : true,
                        scrollHorizontal   : false,
                        keyboardNavigation : true,
                        loopTour           : false,
                        highlightStartSpeed: 200,
                        highlightEndSpeed  : 200,
                        onStartTour        : function(ui){
                            
                            // show the progressbar               
                            $('#progressbar').show();	
                
                        },
                        onEndTour          : function(ui){
                            
                            // progressbar hide and reset
                            $('#progressbar')
                            .hide()
                            .children('#bar')
                            .children()
                            .width(0)
                            .next()
                            .text('loading...');
                
                        },	
                        onProgress         : function(ui){
                            
                            // variables
                            var i       = ui.stepIndex;
                            var total   = ui.totalSteps;
                            var barSize = 100 / total * i+'%';
                            
                            // run progressbar
                            $('#text')
                            .html('<span>'+i+'</span>/'+total+'')
                            .prev('#bar')
                            .children()
                            .animate({width: barSize},400);
                
                        },
                        steps : [
                              {
                                  hookTo          : '#powertour-demo-box-1',
                                  content         : '#step-id-1',
                                  width           : 400,
                                  position        : 'bm',
                                  offsetY         : 20,
                                  offsetX         : 0,
                                  fxIn            : 'flipInX',
                                  fxOut           : 'bounceOutLeft',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-box-2',
                                  content         : '#step-id-2',
                                  width           : 300,
                                  position        : 'lt',
                                  offsetY         : 0,
                                  offsetX         : 20,
                                  fxIn            : 'fadeIn',
                                  fxOut           : 'fadeOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : true,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-box-3',
                                  content         : '#step-id-3',
                                  width           : 400,
                                  position        : 'tr',
                                  offsetY         : -80,
                                  offsetX         : 40,
                                  fxIn            : 'rotateIn',
                                  fxOut           : 'rotateOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              }		
                        ]
                    }
                ]
    		});
    	});
    </script>

</head> 
<body>

    <!-- progressbar -->
    
    <div id="progressbar">
        <div id="bar">
            <span></span>
        </div>
        <div id="text"></div>
    </div>        
        
	<!-- trigger -->
    
	<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>

	<!-- hookTo -->
    
    <div class="powertour-demo-box" id="powertour-demo-box-1">
        <p>Demo box 1</p>
        <span>(hookTo)</span>
    </div>    

    <div class="powertour-demo-box" id="powertour-demo-box-2">
        <p>Demo box 2</p>
        <span>(hookTo)</span>
    </div> 
     
    <div class="powertour-demo-box" id="powertour-demo-box-3">
        <p>Demo box 3</p>
        <span>(hookTo)</span>
    </div> 
    
    <!-- steps(content) --> 
    
    <div class="single-step" id="step-id-1">
        <h3>Step one</h3>
        <p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
        <br/>
        <a href="#" data-powertour-action="next">Next step...</a>
    </div>
    
    <div class="single-step" id="step-id-2">
        <h3>Step two</h3>
        <p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
        <br/>
        <a href="#" data-powertour-action="prev">Prev step</a>
        <a href="#" data-powertour-action="next" style="float:right">Next step</a>
    </div>
    
    <div class="single-step" id="step-id-3">
        <h3>Step three</h3>
        <p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
        <br/>
        <a href="#" data-powertour-action="prev">Prev step...</a>
        <a href="#" data-powertour-action="stop" style="float:right">End tour</a>
    </div>

</body> 
</html>

Step one

This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.


Next step...

Step two

This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.


Prev step Next step

Step three

This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.


Prev step... End tour