A modern, lightweight scroll progress indicator for web pages
🔴 Live Demo on CodePen
Looking for PHP Version?
- Sleek and modern scroll progress indicator
- Fully customizable appearance (height, colors, position)
- Smooth animation effects
- Lightweight with no dependencies
- Easy integration with any website
Add the following links to your HTML:
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/emmanpbarrameda/scrollify-js@latest/scrollify-scrollprogress-indicator.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/emmanpbarrameda/scrollify-js@latest/scrollify-scrollprogress-indicator.js"></script>Insert this div where you want the progress bar to appear:
<div
class="scrollify_scroll_progress"
data-height="4px"
data-background="linear-gradient(to left, #B374F8, #4da3ff)"
data-z-index="10000"
data-top="0px">
</div>Customize the progress bar using these data attributes:
| Attribute | Description | Default Value |
|---|---|---|
data-height |
Height of the progress bar | 4px |
data-background |
Background color/gradient | linear-gradient(to left, #B374F8, #4da3ff) |
data-z-index |
Stack order of the bar | 10000 |
data-top |
Top position of the bar | 0px |
<!DOCTYPE html>
<html>
<head>
<title>My Website with Scrollify</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/emmanpbarrameda/scrollify-js@latest/scrollify-scrollprogress-indicator.css">
</head>
<body>
<!-- Progress Bar -->
<div
class="scrollify_scroll_progress"
data-height="4px"
data-background="linear-gradient(to left, #B374F8, #4da3ff)"
data-z-index="10000"
data-top="0px">
</div>
<!-- Your content here -->
<script src="https://cdn.jsdelivr.net/gh/emmanpbarrameda/scrollify-js@latest/scrollify-scrollprogress-indicator.js"></script>
</body>
</html>Want to contribute? That's great! You can:
- Fork the repository
- Create a feature branch (
git checkout -b feature/NewFeature) - Push your changes (
git push origin feature/NewFeature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
If you find this project helpful, consider:
Visit My Portfolio
Check out my portfolio to learn more about me! 
|
|
Made with ❤️ by emmanpbarrameda