;
21 |
22 | forceUpdate(): void;
23 | }
24 |
25 | interface HTMLAttributes {}
26 | }
27 |
28 |
29 | declare global {
30 |
31 | namespace StencilComponents {
32 | interface LoadingSpinner {
33 | 'color': string;
34 | 'type': string;
35 | }
36 | }
37 |
38 | interface HTMLLoadingSpinnerElement extends StencilComponents.LoadingSpinner, HTMLStencilElement {}
39 |
40 | var HTMLLoadingSpinnerElement: {
41 | prototype: HTMLLoadingSpinnerElement;
42 | new (): HTMLLoadingSpinnerElement;
43 | };
44 | interface HTMLElementTagNameMap {
45 | 'loading-spinner': HTMLLoadingSpinnerElement;
46 | }
47 | interface ElementTagNameMap {
48 | 'loading-spinner': HTMLLoadingSpinnerElement;
49 | }
50 | namespace JSX {
51 | interface IntrinsicElements {
52 | 'loading-spinner': JSXElements.LoadingSpinnerAttributes;
53 | }
54 | }
55 | namespace JSXElements {
56 | export interface LoadingSpinnerAttributes extends HTMLAttributes {
57 | 'color'?: string;
58 | 'type'?: string;
59 | }
60 | }
61 | }
62 |
63 | declare global { namespace JSX { interface StencilJSX {} } }
64 |
--------------------------------------------------------------------------------
/src/components/loading-spinner/loading-spinner.scss:
--------------------------------------------------------------------------------
1 | loading-spinner{
2 | svg {
3 | width: 2rem;
4 | height: 2rem;
5 | &.spinner-android {
6 | animation: rotate 2s linear infinite;
7 | & .path {
8 | stroke-linecap: round;
9 | animation: dash 1.5s ease-in-out infinite;
10 | }
11 | }
12 | &.spinner-ios {
13 | animation: iosIntro .6s;
14 | path:nth-of-type(1) {
15 | animation: pulse 1s infinite linear;
16 | }
17 | path:nth-of-type(2) {
18 | animation: pulse 1s -.083s infinite linear;
19 | }
20 | path:nth-of-type(3) {
21 | animation: pulse 1s -.166s infinite linear;
22 | }
23 | path:nth-of-type(4) {
24 | animation: pulse 1s -.249s infinite linear;
25 | }
26 | path:nth-of-type(5) {
27 | animation: pulse 1s -.332s infinite linear;
28 | }
29 | path:nth-of-type(6) {
30 | animation: pulse 1s -.415s infinite linear;
31 | }
32 | path:nth-of-type(7) {
33 | animation: pulse 1s -.498s infinite linear;
34 | }
35 | path:nth-of-type(8) {
36 | animation: pulse 1s -.581s infinite linear;
37 | }
38 | path:nth-of-type(9) {
39 | animation: pulse 1s -.664s infinite linear;
40 | }
41 | path:nth-of-type(10) {
42 | animation: pulse 1s -.747s infinite linear;
43 | }
44 | path:nth-of-type(11) {
45 | animation: pulse 1s -.83s infinite linear;
46 | }
47 | path:nth-of-type(12) {
48 | animation: pulse 1s -.913s infinite linear;
49 | }
50 | }
51 |
52 | }
53 |
54 |
55 | // Keyframes
56 |
57 | @keyframes rotate {
58 | 100% {
59 | transform: rotate(360deg);
60 | }
61 | }
62 |
63 | @keyframes dash {
64 | 0% {
65 | stroke-dasharray: 1, 150;
66 | stroke-dashoffset: 0;
67 | }
68 | 50% {
69 | stroke-dasharray: 90, 150;
70 | stroke-dashoffset: -35;
71 | }
72 | 100% {
73 | stroke-dasharray: 90, 150;
74 | stroke-dashoffset: -124;
75 | }
76 | }
77 |
78 |
79 | @keyframes pulse {
80 | 50% { fill-opacity: .2 }
81 | to { fill-opacity: 1 }
82 | }
83 |
84 | @keyframes iosIntro {
85 | from {
86 | transform: scale(0);
87 | opacity: 0;
88 | }
89 | to {
90 | transform: scale(1);
91 | opacity: 1;
92 | }
93 | }
94 |
95 | }
--------------------------------------------------------------------------------
/src/components/loading-spinner/loading-spinner.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop } from '@stencil/core';
2 |
3 |
4 | @Component({
5 | tag: 'loading-spinner',
6 | styleUrl: 'loading-spinner.scss'
7 | })
8 | export class Spinner {
9 |
10 | @Prop() type: string = 'android';
11 | @Prop() color: string = 'grey';
12 |
13 | render() {
14 | switch(this.type){
15 | case 'circle':
16 | return (
17 |
22 | );
23 | case 'bars':
24 | return (
25 |
42 | );
43 | case 'android':
44 | return (
45 |
48 | )
49 | case 'ios':
50 | return (
51 |
65 | )
66 | default :
67 | return (null);
68 | }
69 |
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Stencil Starter App
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Stencil Starter",
3 | "short_name": "Stencil",
4 | "start_url": "/",
5 | "display": "standalone",
6 | "icons": [{
7 | "src": "assets/img/icon.png",
8 | "sizes": "512x512",
9 | "type": "image/png"
10 | }],
11 | "background_color": "#16161d",
12 | "theme_color": "#16161d"
13 | }
--------------------------------------------------------------------------------
/stencil.config.js:
--------------------------------------------------------------------------------
1 | const sass = require('@stencil/sass');
2 |
3 | exports.config = {
4 | bundles: [
5 | { components: ['loading-spinner'] }
6 | ],
7 | plugins: [
8 | sass()
9 | ]
10 | };
11 |
12 | exports.devServer = {
13 | root: 'www',
14 | watchGlob: '**/**'
15 | }
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "allowUnreachableCode": false,
5 | "declaration": false,
6 | "experimentalDecorators": true,
7 | "lib": [
8 | "dom",
9 | "es2015"
10 | ],
11 | "moduleResolution": "node",
12 | "module": "es2015",
13 | "target": "es2015",
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "jsx": "react",
17 | "jsxFactory": "h"
18 | },
19 | "include": [
20 | "src"
21 | ],
22 | "exclude": [
23 | "node_modules"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/www/assets/icon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seanwuapps/stencil-loading-spinner/10862fb0095df2f329b5cc488bb38c99c4e4e6e7/www/assets/icon/favicon.ico
--------------------------------------------------------------------------------
/www/assets/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seanwuapps/stencil-loading-spinner/10862fb0095df2f329b5cc488bb38c99c4e4e6e7/www/assets/img/icon.png
--------------------------------------------------------------------------------
/www/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seanwuapps/stencil-loading-spinner/10862fb0095df2f329b5cc488bb38c99c4e4e6e7/www/favicon.ico
--------------------------------------------------------------------------------
/www/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Stencil Starter",
3 | "short_name": "Stencil",
4 | "start_url": "/",
5 | "display": "standalone",
6 | "icons": [{
7 | "src": "assets/img/icon.png",
8 | "sizes": "512x512",
9 | "type": "image/png"
10 | }],
11 | "background_color": "#16161d",
12 | "theme_color": "#16161d"
13 | }
--------------------------------------------------------------------------------