Skip to content

ranjeetsinghbnl/smt-spinner

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

Built With Stencil

<smt-progress-spinner/>

Stencil progress spinner component is a circular indicators of progress and activity. It is inspired from material progress bar indicator. You can use it for showing progress of the task as well as for creating a progress indicator.

<smt-progress-spinner
color="#3f51b5"
diameter="100"
mode="determinate"
stroke-width="10"
value="10"
>
</smt-progress-spinner>

For more guides on stencil.js components, please check their documentation.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/ranjeetsinghbnl/smt-spinner.git smt-spinner
cd smt-spinner
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using this component

Script tag

  • Publish to NPM
  • Put a script tag similar to this <script src='https://unpkg.com/smt-spinner@0.0.1/dist/smt-spinner.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install smt-spinner --save
  • Put a script tag similar to this <script src='node_modules/smt-spinner/dist/smt-spinner.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install smt-spinner --save
  • Add an import to the npm packages import smt-spinner;
  • Then you can use the element anywhere in your template, JSX, html etc

For more details you can also check the official integration guide.

Properties

Property Attribute Description Type Default
color color Hex color code for the component. string #3f51b5
diameter diameter The diameter of the progress spinner (will set width and height of svg). number 100
mode mode Mode of the progress circle string determinate or indeterminate
stroke-width stroke-width Stroke width of the progress spinner. number 10
value value Value of the progress circle. number 10

About

Stencil progress spinner component is a circular indicators of progress and activity. Inspired from material progress bar indicator.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published