https://github.com/chrisnajman/scroll-page-watcher

If your browser supports 'animation-timeline: scroll()' CSS, a horizontal line will appear at the top of the screen as you scroll, indicating how far you have travelled down the page.
https://github.com/chrisnajman/scroll-page-watcher

css-imports css-nesting dark-mode html-css-javascript light-mode prefers-reduced-motion supports svg-icons svg-sprites

Last synced: 7 months ago
JSON representation

If your browser supports 'animation-timeline: scroll()' CSS, a horizontal line will appear at the top of the screen as you scroll, indicating how far you have travelled down the page.

• Host: GitHub
• URL: https://github.com/chrisnajman/scroll-page-watcher
• Owner: chrisnajman
• License: mit
• Created: 2023-12-27T07:18:36.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-14T12:51:18.000Z (over 1 year ago)
• Last Synced: 2025-01-21T19:36:37.015Z (9 months ago)
• Topics: css-imports, css-nesting, dark-mode, html-css-javascript, light-mode, prefers-reduced-motion, supports, svg-icons, svg-sprites
• Language: HTML
• Homepage: https://chrisnajman.github.io/scroll-page-watcher/
• Size: 18.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Scroll Page Watcher (CSS Only)

If your browser supports `animation-timeline: scroll()` CSS, a horizontal line will appear at the top of the screen as you scroll, indicating how far you have travelled down the page. If it doesn't, the line will not appear.

```css

@media (prefers-reduced-motion: no-preference) {

  @supports (animation-timeline: scroll()) {

    .body {

      padding-top: 1rem;

    }

    .scroll-watcher {

      height: 1rem;

      position: fixed;

      top: 0;

      right: 0;

      left: 0;

      z-index: 1000;

      background-color: var(--timeline);

      scale: 0 1;

      transform-origin: left;

      animation: scroll-watcher linear;

      animation-timeline: scroll();

    }

    @keyframes scroll-watcher {

      to {

        scale: 1 1;

      }

    }

  }

}

```

This CSS code snippet includes the use of `@media` queries to target devices that prefer no-reduced motion and `@supports` to check if the browser supports the `animation-timeline: scroll()` property. If supported, it triggers the animation for the `.scroll-watcher` class.

## WAVE Web Accessibility Evaluation Tools Report

- [Automated accessibility analysis results](https://wave.webaim.org/report#/https://chrisnajman.github.io/scroll-page-watcher/)

## Testing

Tested on Windows 10 with:

- Chrome

- Firefox

- Microsoft Edge

The page has been tested in both browser and device views.