shipshapecode/shepherd

Progress bar / dots

Closed this issue · 3 comments

It would be great if there was a way to add a progress indicator such as a bar or dots. The dot progress is pretty common in tours. It could be more generic if there was a way to insert html below the buttons. If there was a footerFn option, where the function passed in has the params (step, numSteps) and returns a html string, then it would be easy to create any type of progress indicator.

There are docs on progress indicator implementation here https://shepherdjs.dev/docs/tutorial-04-cookbook.html

That's not really enough. The buttons are not in a div, so adding an :after object has the buttons and progress in one div. And the example is for string progress where progress dots looks nicer. Progress dots are much wider so they need to go under the buttons and not the same row.

<footer class="shepherd-footer">
    <div class="shepherd-button-group">
        <button class="shepherd-button-secondary shepherd-button " tabindex="0">Back</button>
        <button class=" shepherd-button " tabindex="0">Next</button>
    </div>
    <div id="shepherd-progress">
         ...some html
    </div>
</footer>

Like this #2499