A modern, lightweight scroll progress indicator for web pages
based on
Scrollify JS
🔴 Live Demo on CodePen
Looking for CSS-JS 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
First, download the scrollify_php.php file from the following GitHub repository:
This PHP file will handle the inclusion of necessary resources for the scroll progress bar.
Next, place the scrollify_php.php in your project directory.
Next, download the required CSS and JS files for the scroll progress bar from the CDN:
- CSS: https://cdn.jsdelivr.net/gh/emmanpbarrameda/scrollify-js@latest/scrollify-scrollprogress-indicator.css
- JS: https://cdn.jsdelivr.net/gh/emmanpbarrameda/scrollify-js@latest/scrollify-scrollprogress-indicator.js
Note: Download these files manually on this github repo, or by using the provided links.
Next, place them in your project directory under: e.g.,; assets/css/ and assets/js/ folders.
In your PHP Blade files, include the scrollify_php.php using the following PHP code:
<?php include 'scrollify_php.php'; ?>This will include the necessary CSS and JS files for the scroll progress bar to function properly.
<!DOCTYPE html>
<html>
<head>
<title>My Website with Scrollify - PHP</title>
</head>
<body>
<!-- Progress Bar -->
<?php include_once 'scrollify_php.php'; ?>
<!-- Your content here -->
</body>
</html>You can customize the progress bar using the following data attributes, located on scrollify_php.php file
| 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 |
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