@cfrezier/reveal-progress-image-plugin v1.2.1

reveal-progress-image-plugin

Add an image in your reveal.js progress bar

Use plugin

<script type="module">
    import RevealProgressImage from "../node_modules/@cfrezier/reveal-progress-image-plugin/dist/index.js";
    
    Reveal.initialize({
        hash: true,
        progress: true,
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealProgressImage(Reveal)],
        });
</script>

This is available inside an ESModule, so you probably should use an <script type="module"> tag.

Custom Configuration

Overload configuration

Please make sure to include a file at ./images/progress.web or change the parameter. You can overload this configuration like this:

Reveal.initialize({
    hash: true,
    progress: true,

    progressImage: {
        imageSrc: './my-image.png'
    },
    
    plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealProgressImage(Reveal)],
});

Default configuration

By defaut configuration is set to:

    iconSize: [30, 30],
    bottom: 5,
    moveTransition: 'left .8s cubic-bezier(.26,.86,.44,.985)',
    imageSrc: './images/progress.webp',
    imageAnimation: ANIMATIONS.DANCE,

Use preconfigured animations

const progressPlugin = RevealProgressImage(Reveal);

Reveal.initialize({
    hash: true,
    progress: true,
    progressImage: {
        imageAnimation: progressPlugin.ANIMATIONS.FLY
    },
    plugins: [RevealMarkdown, RevealHighlight, RevealNotes, progressPlugin],
});