Component Library

Scroll progress bar 

<div class="progress-bar"></div>
 
<div class="progress-bar"></div>
 
/* No context defined for this component. */
  • Content: 
    'use strict';

/**
 * @name Novicell Scroll progress bar
 * @author Emil Ankersen (EAN)
 * @requires https://github.com/jeremenichelli/scrollProgress
 */

var novicell = novicell || {};

novicell.scrollProgressBar =
    novicell.scrollProgressBar ||
    new function() {
        this.init = function() {
            const progressElement = document.querySelector('.progress-bar');
            if (progressElement) {
                const progressObserver = new ScrollProgress((x, y) => {
                    progressElement.style.width = `${y * 100}%`;
                });
            }
        };
    }();
  • URL: /components/raw/scroll-progress-bar/novicell.scroll-progress-bar.js
  • Filesystem Path: src/01-atoms/scroll-progress-bar/novicell.scroll-progress-bar.js
  • Size: 607 Bytes
  • Content: 
    :root {
    --progress-bar-bg: var(--color-primary, blue);
    --progress-bar-height: 5px;
}

.progress-bar {
    background-color: var(--progress-bar-bg);
    height: var(--progress-bar-height);
    position: fixed;
    bottom: 0;
}
  • URL: /components/raw/scroll-progress-bar/scroll-progress-bar.css
  • Filesystem Path: src/01-atoms/scroll-progress-bar/scroll-progress-bar.css
  • Size: 234 Bytes

There are no notes for this item.