Progress dots for steps

[iamsachin]

Is a progress indicator planned? Something like a set of dots denoting each step, and clicking a dot can take you to steps back.

Current step and total steps can currently be had as you suggested here: https://github.com/shipshapecode/shepherd/issues/427

[RobbieTheWagner]

Hi @IamSachin, it could be potentially added. We would need to plan out all the details. For example, what happens when you have like 50 steps? You could not show all the dots.

[iamsachin]

For more than a certain number of dots, it could turn into a progress bar. Also, we could have a choice to show dots or progress bar.

Visually, it'll give an idea to the viewer as to how big the guide is and where the user is at the moment.

[RobbieTheWagner]

Visually, it'll give an idea to the viewer as to how big the guide is and where the user is at the moment

Yeah, I totally agree with the concept, and other libraries like introjs support it. I am in the middle of doing a huge refactor of the codebase here, so we can consider this feature after that is released.

[iamsachin]

Thank you so much

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[iamsachin]

Robert, any plans about this?

[RobbieTheWagner]

@IamSachin no immediate plans. It can be implemented manually for now. Might be better to leave it manual anyway and just have an example on how to do it.

[Tatya-winchu]

@rwwagner90 Hey! where can I find that example ?

[RobbieTheWagner]

Hi @kedardahivale no example has been created yet, however, it would be a set of dots, with each dot corresponding to a step, and updating which one is selected each time the tour advances. What questions do you have about the implementation? Perhaps I could help.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[HecOsborneRod]

A Simple fix could be to add the current step number vs total number of steps

For instance: 2 of 20 steps.

At least it keeps the users informed.

[RobbieTheWagner]

@madebyhector this is already possible, using the current API.

[mjpoo]

I'm migrating a site from intro.js and would be interested in the ability to display progression dots/bar and also to display the step number in the top corner of the tooltip as you can in intro.js.

[RobbieTheWagner]

@mikejpoole would you be interested in helping implement the progress dots? The step numbers can be done already, but require manual setup.

[mjpoo]

Hi @rwwagner90 yes, I'd be interested in helping with the progress dots. Where can I find further information about the step numbers?

[iamsachin]

I do it like this:

getGuideContent(content, progress) {
    const progressIndicator = `<div class="guide-progress-indicator">${progress.currentStep} of ${progress.totalSteps}</div>`;
    return `<div class="guide-content">${content}</div>${progressIndicator}`;
}

The progress object is:

{
    currentStep: step.order,
    totalSteps: this.stepsCount
}

[RobbieTheWagner]

@mikejpoole it was discussed here https://github.com/shipshapecode/shepherd/issues/427#issuecomment-508923059

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sitrobotsit]

@IamSachin could you share how your solution integrates with Shepherd?

[yonkov]

@rwwagner90 , is there an update for this? Can you provide some example how to add a simple progress bar in the tour? I see @chuckcarpenter added some code but i am not sure how this can be used.

As far as I understood from the docs, I need to add popper.js as another dependency and then do something like:

const tour = new Shepherd.Tour({
    defaultStepOptions: {
        when: {
            show: function () {
                const currentStepElement = shepherd.currentStep.el;
                const header = currentStepElement.querySelector('.shepherd-header');
                const progress = document.createElement('span');
                progress.style['margin-right'] = '315px';
                progress.innerText = `${shepherd.steps.indexOf(shepherd.currentStep) + 1}/${shepherd.steps.length}`;
                header.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
            }
        }
    }
})

Is that correct or I am missing something?

[RobbieTheWagner]

@yonkov popper is included already in Shepherd. Your example seems okay here. What's the issue?

[yonkov]

Thank you guys, I successfully added a progress bar and wrote a simple tutorial how to it. I hope someone might find it useful: How to Add a Progress Bar in Shepherd.js

[aripddev]

Thanks @yonkov, inspired by you. Below is the improved code for anyone wants to place progress in footer. Added shepherd-progress className and some scss.

const currentStepElement = shepherd.currentStep.el;
const footer = currentStepElement.querySelector('.shepherd-footer');
const progress = document.createElement('span');
progress.className = 'shepherd-progress';
progress.innerText = `${shepherd.steps.indexOf(shepherd.currentStep) + 1} of ${shepherd.steps.length}`;
footer.insertBefore(progress, currentStepElement.querySelector('.shepherd-button:last-child'));

.shepherd-footer {
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    padding:0 .75rem .75rem;
    display:flex;
    justify-content:space-between;
    align-items: center;

    .shepherd-button:last-child {
        margin-right:0
    }

    .shepherd-progress {
        font-size: .8rem;
    }
}

Result

[RobbieTheWagner]

@yonkov @aripddev if either of you want to improve the cookbook on this, I would gladly accept a PR!

[aripddev]

Thanks @rwwagner90 , I have just added new propose changes for the cookbook.

[RobbieTheWagner]

@aripddev I am not seeing a PR. Are you sure you opened one?

[aripddev]

@rwwagner90 My mistake. Now I've created PR

[chuckcarpenter]

@aripddev looks like that's into the fork. Can you chose this repo as the target? https://github.com/aripddev/shepherd/pull/1