Components

Scroll Progress

GitHub

A Stimulus controller to add a progress bar when scrolling.

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/scroll-progress

  2. Register the controller in your application

    app/javascript/controllers/index.js
    import { Application } from '@hotwired/stimulus'
import ScrollProgress from '@stimulus-components/scroll-progress'

const application = Application.start()
application.register('scroll-progress', ScrollProgress)

Example

Scroll Progress

Scroll down to see the progress bar 👇

Usage

Add a div just after the body opening tag:

app/views/index.html
<body>
  <div data-controller="scroll-progress" class="h-2 bg-indigo-400 fixed top-0"></div>
</body>

It's up to you to design it as you want.

Configuration

To improve performance, the scroll event is throttled.

AttributeDefaultDescriptionOptional
data-scroll-progress-throttle-delay-value15Delay in milliseconds to update the scroll position. (0 to disable).✅

Extending Controller

You can use inheritance to extend the functionality of any Stimulus component:

app/javascript/controllers/scroll_progress_controller.js
import ScrollProgress from "@stimulus-components/scroll-progress"

export default class extends ScrollProgress {
  connect() {
    super.connect()
    console.log("Do what you want here.")
  }
}

This controller will automatically have access to targets defined in the parent class.

If you override the connect, disconnect or any other methods from the parent, you'll want to call super.method() to make sure the parent functionality is executed.