<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