https://github.com/afirdousi/ngx-scroll-signal

This library helps you add page scroll signal on top or the left of your page.
https://github.com/afirdousi/ngx-scroll-signal

angular2 angular4 page-scroll scroll-events scroll-plugins scroll-view scrolling scrollspy

Last synced: about 1 month ago
JSON representation

This library helps you add page scroll signal on top or the left of your page.

• Host: GitHub
• URL: https://github.com/afirdousi/ngx-scroll-signal
• Owner: afirdousi
• License: mit
• Created: 2017-07-27T15:26:10.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-27T15:26:46.000Z (almost 9 years ago)
• Last Synced: 2025-10-02T04:38:56.198Z (9 months ago)
• Topics: angular2, angular4, page-scroll, scroll-events, scroll-plugins, scroll-view, scrolling, scrollspy
• Language: HTML
• Size: 13.4 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ngx-scroll-signal

[![npm version](https://badge.fury.io/js/ngx-scroll-signal.svg)](https://badge.fury.io/js/ngx-scroll-signal)

[![Dependency Status](https://david-dm.org/afirdousi/ngx-scroll-signal.svg)](https://david-dm.org/afirdousi/ngx-scroll-signal)

>This library helps you add page scroll signal on top or the left of your page.

![Demo](ngx-scroll-signal-demo.gif)

## Installation

```js

npm install ngx-scroll-signal --save

```

### Its that simple to use

```js

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { NgxScrollSignalModule } from 'ngx-scroll-signal';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgxScrollSignalModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

## Options

| position     	| type       	| Set the position to be vertical or horizontal  	| 'x' or '0' or 'horizontal' 	| 'y' or '1' or 'vertical' 	|

|--------------	|-------------- |------------------------------------------------	|----------------------------	|--------------------------	|

| base-color   	| property      | Set the base color of the scroll signal line   	| Hex or RGB or Color name   	|                          	|

| signal-color 	| property      | Set the progress bar / filler color            	| Hex or RGB or Color name   	|                          	|

| opacity      	| property      | Sets the opacity of both base and signal color 	|                            	|                          	|

| on-end       	| event         | Event fired as a end of page flag              	|                            	|                          	|

## Defaults

| base-color   	| #ecf0f1 	|

|--------------	|---------	|

| signal-color 	| #2ecc71 	|

## License

MIT

## P.S

I will be using this library as a reference in my future talks/workshops on how you can start things from scratch

when you are new to Angular, ngc, rollup, systemjs e.t.c. I plan to release a webpack version of the same thing.

Feel free to use this library and open PRs but you will find things done in a super naive way (which is on purpose).