diff --git a/docs/assets/images/components/spinner.svg b/docs/assets/images/components/spinner.svg
new file mode 100644
index 0000000000..8b80395e31
--- /dev/null
+++ b/docs/assets/images/components/spinner.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="47px" height="58px" viewBox="0 0 47 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>4132A270-0635-4179-BE32-E6BD0F1089CF</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <polygon id="path-1" points="0.1296 0.1454 22.5506 0.1454 22.5506 5 0.1296 5"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-source" transform="translate(-128.000000, -1050.000000)">
+            <g id="Group" transform="translate(87.000000, 66.000000)">
+                <g id="Group-6-Copy-3" transform="translate(0.000000, 587.000000)">
+                    <g id="Group-4">
+                        <g id="spinner" transform="translate(32.000000, 394.000000)">
+                            <rect id="Background" x="0" y="0" width="64" height="64"></rect>
+                            <path d="M24.1573635,40.448419 C16.3653635,35.928419 13.7123635,25.948419 18.2323635,18.157419 C22.7513635,10.365419 32.7323635,7.71241905 40.5233635,12.231419 C48.3153635,16.751419 50.9683635,26.731419 46.4493635,34.523419 C41.9293635,42.315419 31.9493635,44.968419 24.1573635,40.448419 M43.5473635,7.01841905 C32.8763635,0.829419049 19.2083635,4.46241905 13.0193635,15.133419 C6.82936349,25.803419 10.4623635,39.471419 21.1333635,45.661419 C31.8043635,51.851419 45.4723635,48.218419 51.6613635,37.547419 C57.8513635,26.876419 54.2183635,13.208419 43.5473635,7.01841905" id="Fill-1" fill="#49A4F5"></path>
+                            <path d="M51.6617635,37.547019 C57.8507635,26.876019 54.2187635,13.208019 43.5477635,7.01901905 C32.8767635,0.829019049 19.2087635,4.46201905 13.0187635,15.133019 L18.2317635,18.157019 C22.7517635,10.365019 32.7317635,7.71201905 40.5237635,12.232019 C48.3157635,16.751019 50.9687635,26.732019 46.4487635,34.524019 C42.5537635,41.239019 34.6017635,44.124019 27.4907635,41.902019 L25.6947635,47.663019 C35.4347635,50.708019 46.3267635,46.746019 51.6617635,37.547019" id="Fill-3" fill="#6DA3F2"></path>
+                            <path d="M24.1573635,40.448419 C16.3653635,35.928419 13.7123635,25.948419 18.2323635,18.157419 L13.0193635,15.133419 C6.82936349,25.803419 10.4623635,39.471419 21.1333635,45.661419 C22.6053635,46.515419 24.1363635,47.176419 25.6953635,47.663419 L27.4903635,41.902419 C26.3513635,41.546419 25.2323635,41.072419 24.1573635,40.448419" id="Fill-5" fill="#CADEFF"></path>
+                            <path d="M18.7574159,18.331 L14.7394159,16 C8.38841588,26.32 13.9954159,38.714 22.2214159,43.486 C23.3564159,44.144 24.5364159,44.654 25.7384159,45.029 L26.57,42.121 C25.692,41.847 24.829,41.481 24,41 C17.993,37.517 13.1514159,26.659 18.7574159,18.331 Z" id="Fill-7" fill="#EEF5FF"></path>
+                            <path d="M50.796726,37.0453119 C56.7088442,26.851708 53.2389584,13.7957679 43.0459957,7.88402139 C32.8528625,1.97122087 19.7967279,5.44137525 13.8837658,15.6347869 C7.97108454,25.8277145 11.4419203,38.8838942 21.6355313,44.7960167 C31.8287008,50.7088383 44.884779,47.2386204 50.796726,37.0453119 Z M52.526801,38.0487262 C46.0606538,49.1975801 31.7806638,52.9931056 20.6320563,46.5260566 C9.48299326,40.0597881 5.68679825,25.7797102 12.1537611,14.6312512 C18.6209497,3.48240324 32.9009241,-0.313032181 44.0494707,6.15398153 C55.1979143,12.6198908 58.9930622,26.8996758 52.526801,38.0487262 Z" id="Stroke-9" fill="#457AE6" fill-rule="nonzero"></path>
+                            <path d="M45.7981418,34.1458846 C50.1090575,26.7135953 47.5786632,17.1935245 40.146429,12.8826407 C32.7141718,8.57174363 23.1940319,11.102079 18.8822326,18.5342717 C14.5719229,25.9671363 17.1021979,35.4870488 24.5348979,39.7985974 C31.9669396,44.1093694 41.4871144,41.5783664 45.7981418,34.1458846 Z M47.5281852,35.1493535 C42.66298,43.5372726 31.9189865,46.3936362 23.5313947,41.5286208 C15.1432644,36.6628479 12.2877456,25.9192373 17.1521893,17.5308028 C22.0183223,9.14311206 32.7622022,6.28752174 41.1498979,11.1525974 C49.5376136,16.0176845 52.3932986,26.7615926 47.5281852,35.1493535 Z" id="Stroke-11" fill="#457AE6" fill-rule="nonzero"></path>
+                            <polygon id="Stroke-13" fill="#457AE6" fill-rule="nonzero" points="19.3843899 17.66902 18.3810625 19.3991455 11.6519371 15.4968181 12.6552645 13.7666926"></polygon>
+                            <polygon id="Stroke-15" fill="#457AE6" fill-rule="nonzero" points="26.3717354 48.9049838 24.4531987 48.339991 26.4081915 41.7014543 28.3267282 42.2664471"></polygon>
+                            <g id="Group-19" transform="translate(21.000263, 55.998119)">
+                                <mask id="mask-2" fill="white">
+                                    <use xlink:href="#path-1"></use>
+                                </mask>
+                                <g id="Clip-18"></g>
+                                <path d="M22.5506,2.5724 C22.5506,3.9134 17.5316,5.0004 11.3406,5.0004 C5.1486,5.0004 0.1296,3.9134 0.1296,2.5724 C0.1296,1.2324 5.1486,0.1454 11.3406,0.1454 C17.5316,0.1454 22.5506,1.2324 22.5506,2.5724" id="Fill-17" fill="#CADEFF" mask="url(#mask-2)"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/docs/structure.ts b/docs/structure.ts
index 0a66ef0b88..df51ddbad4 100644
--- a/docs/structure.ts
+++ b/docs/structure.ts
@@ -249,6 +249,14 @@ export const structure = [
           'NbCheckboxComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Spinner',
+        icon: 'spinner.svg',
+        source: [
+          'NbSpinnerDirective',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Progress Bar',
@@ -316,17 +324,6 @@ export const structure = [
           },
         ],
       },
-      {
-        type: 'page',
-        name: 'SpinnerService',
-        children: [
-          {
-            type: 'block',
-            block: 'component',
-            source: 'NbSpinnerService',
-          },
-        ],
-      },
       {
         type: 'page',
         name: 'MediaBreakpoints',
diff --git a/package-lock.json b/package-lock.json
index c3f9e8d899..188e89fef5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2650,15 +2650,45 @@
       }
     },
     "browserstack-local": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/browserstack-local/-/browserstack-local-1.3.0.tgz",
-      "integrity": "sha1-/oDvBc6JVMTWJuNQLrYtYJA7Qjc=",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/browserstack-local/-/browserstack-local-1.3.3.tgz",
+      "integrity": "sha512-0X1bqi4NzY/7P1l3rOj5NKteH6DPgq+Mwnsj7G+t6p5lgr7R8kSBzblNyZp+HTu0YzyVZL2o/P6m+OJs0u50ng==",
       "dev": true,
       "requires": {
-        "https-proxy-agent": "^1.0.0",
+        "https-proxy-agent": "^2.2.1",
         "is-running": "^2.0.0",
         "sinon": "^1.17.6",
         "temp-fs": "^0.9.9"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.0.tgz",
+          "integrity": "sha512-c+R/U5X+2zz2+UCrCFv6odQzJdoqI+YecuhnAJLa1zYaMc13zPfwMwZrr91Pd1DYNo/yPRbiM4WVf9whgwFsIg==",
+          "dev": true,
+          "requires": {
+            "es6-promisify": "^5.0.0"
+          }
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "https-proxy-agent": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz",
+          "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==",
+          "dev": true,
+          "requires": {
+            "agent-base": "^4.1.0",
+            "debug": "^3.1.0"
+          }
+        }
       }
     },
     "browserstacktunnel-wrapper": {
@@ -4355,9 +4385,9 @@
       }
     },
     "cross-env": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.1.5.tgz",
-      "integrity": "sha512-GSiNTbvTU3pXzewRKGP0Y+rVP2CzifY2pqSEdtHzLLj41pRdkrgY7e4uSnBoR/pmYaqZr/lwwjg/Q4kNX30hWQ==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.1.6.tgz",
+      "integrity": "sha512-VWTDq+G4v383SzgRS7jsAVWqEWF0aKZpDz1GVjhONvPRgHB1LnxP2sXUVFKbykHkPSnfRKS8YdiDevWFwZmQ9g==",
       "dev": true,
       "requires": {
         "cross-spawn": "^5.1.0",
@@ -4785,9 +4815,9 @@
       "dev": true
     },
     "deep-extend": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz",
-      "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
       "dev": true
     },
     "deep-is": {
@@ -5484,6 +5514,16 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
+        },
+        "ws": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz",
+          "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=",
+          "dev": true,
+          "requires": {
+            "options": ">=0.0.5",
+            "ultron": "1.0.x"
+          }
         }
       }
     },
@@ -5521,6 +5561,16 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
+        },
+        "ws": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz",
+          "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=",
+          "dev": true,
+          "requires": {
+            "options": ">=0.0.5",
+            "ultron": "1.0.x"
+          }
         }
       }
     },
@@ -6470,9 +6520,9 @@
       }
     },
     "firebase-tools": {
-      "version": "3.18.4",
-      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-3.18.4.tgz",
-      "integrity": "sha1-SftA4eGnyXeSG3s+zhLajNsTlVA=",
+      "version": "3.18.6",
+      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-3.18.6.tgz",
+      "integrity": "sha1-iSn562OmCjwMVNWamOJIXYyyUNA=",
       "dev": true,
       "requires": {
         "@google-cloud/functions-emulator": "^1.0.0-beta.4",
@@ -6497,7 +6547,7 @@
         "inquirer": "^0.12.0",
         "is": "^3.2.1",
         "jsonschema": "^1.0.2",
-        "jsonwebtoken": "^7.4.1",
+        "jsonwebtoken": "^8.2.1",
         "lodash": "^4.6.1",
         "minimatch": "^3.0.4",
         "open": "^0.0.5",
@@ -6533,14 +6583,14 @@
           "dev": true
         },
         "tar": {
-          "version": "4.4.2",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.2.tgz",
-          "integrity": "sha512-BfkE9CciGGgDsATqkikUHrQrraBCO+ke/1f6SFAEMnxyyfN9lxC+nW1NFWMpqH865DhHIy9vQi682gk1X7friw==",
+          "version": "4.4.4",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.4.tgz",
+          "integrity": "sha512-mq9ixIYfNF9SK0IS/h2HKMu8Q2iaCuhDDsZhdEag/FHv8fOaYld4vN7ouMgcSSt5WKZzPs8atclTcJm36OTh4w==",
           "dev": true,
           "requires": {
             "chownr": "^1.0.1",
             "fs-minipass": "^1.2.5",
-            "minipass": "^2.2.4",
+            "minipass": "^2.3.3",
             "minizlib": "^1.1.0",
             "mkdirp": "^0.5.0",
             "safe-buffer": "^5.1.2",
@@ -8308,17 +8358,17 @@
       }
     },
     "google-auth-library": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-1.5.0.tgz",
-      "integrity": "sha512-xpibA/hkq4waBcpIkSJg4GiDAqcBWjJee3c47zj7xP3RQ0A9mc8MP3Vc9sc8SGRoDYA0OszZxTjW7SbcC4pJIA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-1.6.1.tgz",
+      "integrity": "sha512-jYiWC8NA9n9OtQM7ANn0Tk464do9yhKEtaJ72pKcaBiEwn4LwcGYIYOfwtfsSm3aur/ed3tlSxbmg24IAT6gAg==",
       "dev": true,
       "requires": {
         "axios": "^0.18.0",
         "gcp-metadata": "^0.6.3",
         "gtoken": "^2.3.0",
-        "jws": "^3.1.4",
+        "jws": "^3.1.5",
         "lodash.isstring": "^4.0.1",
-        "lru-cache": "^4.1.2",
+        "lru-cache": "^4.1.3",
         "retry-axios": "^0.3.2"
       }
     },
@@ -10124,12 +10174,6 @@
       "integrity": "sha1-Sj6XTsDLqQBNP8bN5yCeppNopiE=",
       "dev": true
     },
-    "isemail": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.2.0.tgz",
-      "integrity": "sha1-vgPfjMPineTSxd9lASY/H6RZXpo=",
-      "dev": true
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -10392,22 +10436,14 @@
       }
     },
     "jasmine": {
-      "version": "2.99.0",
-      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.99.0.tgz",
-      "integrity": "sha1-jKctEC5jm4Z8ZImFbg4YqceqQrc=",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.8.0.tgz",
+      "integrity": "sha1-awicChFXax8W3xG4AUbZHU6Lij4=",
       "dev": true,
       "requires": {
         "exit": "^0.1.2",
         "glob": "^7.0.6",
-        "jasmine-core": "~2.99.0"
-      },
-      "dependencies": {
-        "jasmine-core": {
-          "version": "2.99.1",
-          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.99.1.tgz",
-          "integrity": "sha1-5kAN8ea1bhMLYcS80JPap/boyhU=",
-          "dev": true
-        }
+        "jasmine-core": "~2.8.0"
       }
     },
     "jasmine-core": {
@@ -10422,6 +10458,13 @@
       "integrity": "sha1-5dguaimiX2YsZA5MMnDC+acTh+c=",
       "requires": {
         "lodash": "3.10.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.0.tgz",
+          "integrity": "sha1-k9UcZygopEFqEq9XIguoqHN+L7s="
+        }
       }
     },
     "jasmine-spec-reporter": {
@@ -10445,18 +10488,6 @@
       "integrity": "sha1-2t2e8BkkvHKLA/L3l5vb1i96Kqo=",
       "dev": true
     },
-    "joi": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-6.10.1.tgz",
-      "integrity": "sha1-TVDDGAeRIgAP5fFq8f+OGRe3fgY=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.x.x",
-        "isemail": "1.x.x",
-        "moment": "2.x.x",
-        "topo": "1.x.x"
-      }
-    },
     "join-path": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/join-path/-/join-path-1.1.1.tgz",
@@ -10679,16 +10710,29 @@
       "dev": true
     },
     "jsonwebtoken": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-7.4.3.tgz",
-      "integrity": "sha1-d/UCHeBYtgWheD+hKD6ZgS5kVjg=",
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.2.2.tgz",
+      "integrity": "sha512-rFFq7ow/JpPzwgaz4IyRL9cp7f4ptjW92eZgsQyqkysLBmDjSSBhnKfQESoq0GU+qJXK/CQ0o4shgwbUPiFCdw==",
       "dev": true,
       "requires": {
-        "joi": "^6.10.1",
-        "jws": "^3.1.4",
+        "jws": "^3.1.5",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
         "lodash.once": "^4.0.0",
-        "ms": "^2.0.0",
+        "ms": "^2.1.1",
         "xtend": "^4.0.1"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        }
       }
     },
     "jsprim": {
@@ -11331,9 +11375,10 @@
       }
     },
     "lodash": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.0.tgz",
-      "integrity": "sha1-k9UcZygopEFqEq9XIguoqHN+L7s="
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+      "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
+      "dev": true
     },
     "lodash._basecopy": {
       "version": "3.0.1",
@@ -11431,6 +11476,12 @@
         "lodash._root": "^3.0.0"
       }
     },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=",
+      "dev": true
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -11443,6 +11494,24 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=",
+      "dev": true
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
+      "dev": true
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
+      "dev": true
+    },
     "lodash.isobject": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
@@ -11452,6 +11521,12 @@
         "lodash._objecttypes": "~2.4.1"
       }
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
     "lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
@@ -12070,12 +12145,12 @@
       }
     },
     "minipass": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.1.tgz",
-      "integrity": "sha512-liT0Gjaz7OHXg2qsfefVFfryBE9uAsqVFWQ6wVf4KNMzI2edsrCDjdGDpTxRaykbxhSKHu/SDtRRcMEcCcTQ2g==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.3.tgz",
+      "integrity": "sha512-/jAn9/tEX4gnpyRATxgHEOV6xbcyxgT7iUnxo9Y3+OB0zX00TgKIv/2FZCf5brBbICcwbLqVv2ImjvWWrQMSYw==",
       "dev": true,
       "requires": {
-        "safe-buffer": "^5.1.1",
+        "safe-buffer": "^5.1.2",
         "yallist": "^3.0.0"
       },
       "dependencies": {
@@ -12195,12 +12270,6 @@
       "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
-    "moment": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
-      "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ==",
-      "dev": true
-    },
     "morgan": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.0.tgz",
@@ -14073,9 +14142,9 @@
       "optional": true
     },
     "protractor": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.2.2.tgz",
-      "integrity": "sha512-KxYw0ySvmWFQHpbSRvrHA5HLlyeAkCENSUZvJroKV1u0gWXX9kvHjc9wEK5IoW7h9UfPV1F3R2i+Own0go5s0g==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.3.2.tgz",
+      "integrity": "sha512-pw4uwwiy5lHZjIguxNpkEwJJa7hVz+bJsvaTI+IbXlfn2qXwzbF8eghW/RmrZwE2sGx82I8etb8lVjQ+JrjejA==",
       "dev": true,
       "requires": {
         "@types/node": "^6.0.46",
@@ -14084,11 +14153,11 @@
         "blocking-proxy": "^1.0.0",
         "chalk": "^1.1.3",
         "glob": "^7.0.3",
-        "jasmine": "^2.5.3",
+        "jasmine": "2.8.0",
         "jasminewd2": "^2.1.0",
         "optimist": "~0.6.0",
         "q": "1.4.1",
-        "saucelabs": "~1.3.0",
+        "saucelabs": "^1.5.0",
         "selenium-webdriver": "3.6.0",
         "source-map-support": "~0.4.0",
         "webdriver-js-extender": "^1.0.0",
@@ -14130,15 +14199,6 @@
             "pinkie-promise": "^2.0.0"
           }
         },
-        "saucelabs": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz",
-          "integrity": "sha1-0kDoAJ33+ocwbsRXimm6O1xCT+4=",
-          "dev": true,
-          "requires": {
-            "https-proxy-agent": "^1.0.0"
-          }
-        },
         "source-map-support": {
           "version": "0.4.18",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
@@ -14460,12 +14520,12 @@
       "dev": true
     },
     "rc": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz",
-      "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
       "dev": true,
       "requires": {
-        "deep-extend": "^0.5.1",
+        "deep-extend": "^0.6.0",
         "ini": "~1.3.0",
         "minimist": "^1.2.0",
         "strip-json-comments": "~2.0.1"
@@ -14911,9 +14971,9 @@
       "dev": true
     },
     "retry-request": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.3.1.tgz",
-      "integrity": "sha512-PjAmtWIxjNj4Co/6FRtBl8afRP3CxrrIAnUzb1dzydfROd+6xt7xAebFeskgQgkfFf8NmzrXIoaB3HxmswXyxw==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.3.2.tgz",
+      "integrity": "sha512-WIiGp37XXDC6e7ku3LFoi7LCL/Gs9luGeeqvbPRb+Zl6OQMw4RCRfSaW+aLfE6lhz1R941UavE6Svl3Dm5xGIQ==",
       "dev": true,
       "requires": {
         "request": "^2.81.0",
@@ -17450,15 +17510,6 @@
         "repeat-string": "^1.6.1"
       }
     },
-    "topo": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/topo/-/topo-1.1.0.tgz",
-      "integrity": "sha1-6ddRYV0buH3IZdsYL6HKCl71NtU=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.x.x"
-      }
-    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
@@ -18015,13 +18066,110 @@
       }
     },
     "universal-analytics": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.4.16.tgz",
-      "integrity": "sha512-I9vK/S6NI2rbPs4UMJs5uAJR7WKUnSQliN0EEl48j7XpVjR87n2wEXp1pMBGGSI5sIIJrKFyVg/nyGomXPPVCg==",
+      "version": "0.4.17",
+      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.4.17.tgz",
+      "integrity": "sha512-N2JFymxv4q2N5Wmftc5JCcM5t1tp+sc1kqeDRhDL4XLY5X6PBZ0kav2wvVUZJJMvmSq3WXrmzDu062p+cSFYfQ==",
       "dev": true,
       "requires": {
-        "request": "2.x",
+        "debug": "^3.0.0",
+        "request": "2.86.0",
         "uuid": "^3.0.0"
+      },
+      "dependencies": {
+        "boom": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
+          "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
+          "dev": true,
+          "requires": {
+            "hoek": "4.x.x"
+          }
+        },
+        "cryptiles": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
+          "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
+          "dev": true,
+          "requires": {
+            "boom": "5.x.x"
+          },
+          "dependencies": {
+            "boom": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
+              "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
+              "dev": true,
+              "requires": {
+                "hoek": "4.x.x"
+              }
+            }
+          }
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "hawk": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
+          "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
+          "dev": true,
+          "requires": {
+            "boom": "4.x.x",
+            "cryptiles": "3.x.x",
+            "hoek": "4.x.x",
+            "sntp": "2.x.x"
+          }
+        },
+        "hoek": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
+          "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
+          "dev": true
+        },
+        "request": {
+          "version": "2.86.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.86.0.tgz",
+          "integrity": "sha512-BQZih67o9r+Ys94tcIW4S7Uu8pthjrQVxhsZ/weOwHbDfACxvIyvnAbzFQxjy1jMtvFSzv5zf4my6cZsJBbVzw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.6.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.5",
+            "extend": "~3.0.1",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.1",
+            "har-validator": "~5.0.3",
+            "hawk": "~6.0.2",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.17",
+            "oauth-sign": "~0.8.2",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.1",
+            "safe-buffer": "^5.1.1",
+            "tough-cookie": "~2.3.3",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.1.0"
+          }
+        },
+        "sntp": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
+          "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
+          "dev": true,
+          "requires": {
+            "hoek": "4.x.x"
+          }
+        }
       }
     },
     "universalify": {
@@ -18638,12 +18786,6 @@
       "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
       "dev": true
     },
-    "walkdir": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.11.tgz",
-      "integrity": "sha1-oW0CXrkxvQO1LzCMrtD0D86+lTI=",
-      "dev": true
-    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
@@ -18665,14 +18807,14 @@
       }
     },
     "wd": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/wd/-/wd-1.7.0.tgz",
-      "integrity": "sha512-dCbHgwqxKNuEEmN/bjfL/vr7JxU3Y7THAiEmSGt4XGEAlPr/H0nMOZerF+eaESf6+umPtpEZJcNFmmtKjMZxhg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/wd/-/wd-1.9.0.tgz",
+      "integrity": "sha512-etqaVS5YFPuwaBRXNFnG0UIoCJHIPoWbVgdbK0v8MQRPQx2sNJc/wu0cRzLEuQjhGt/b0NGxcO1CvA5IAqoWrg==",
       "dev": true,
       "requires": {
-        "archiver": "1.3.0",
+        "archiver": "2.1.1",
         "async": "2.0.1",
-        "lodash": "4.16.2",
+        "lodash": "4.17.10",
         "mkdirp": "^0.5.1",
         "q": "1.4.1",
         "request": "2.85.0",
@@ -18680,23 +18822,6 @@
         "vargs": "0.1.0"
       },
       "dependencies": {
-        "archiver": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/archiver/-/archiver-1.3.0.tgz",
-          "integrity": "sha1-TyGU1tj5nfP1MeaIHxTxXVX6ryI=",
-          "dev": true,
-          "requires": {
-            "archiver-utils": "^1.3.0",
-            "async": "^2.0.0",
-            "buffer-crc32": "^0.2.1",
-            "glob": "^7.0.0",
-            "lodash": "^4.8.0",
-            "readable-stream": "^2.0.0",
-            "tar-stream": "^1.5.0",
-            "walkdir": "^0.0.11",
-            "zip-stream": "^1.1.0"
-          }
-        },
         "async": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/async/-/async-2.0.1.tgz",
@@ -18754,9 +18879,9 @@
           "dev": true
         },
         "lodash": {
-          "version": "4.16.2",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.16.2.tgz",
-          "integrity": "sha1-PmJtuCcEimmSgaihJSJjJs/A5lI=",
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
           "dev": true
         },
         "request": {
@@ -19423,8 +19548,7 @@
     },
     "ws": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz",
-      "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=",
+      "resolved": "",
       "dev": true,
       "requires": {
         "options": ">=0.0.5",
diff --git a/package.json b/package.json
index f3beab749c..9452181ba9 100644
--- a/package.json
+++ b/package.json
@@ -115,12 +115,12 @@
     "@types/leaflet": "1.0.60",
     "@types/node": "6.0.90",
     "angular-cli-ghpages": "0.5.0",
-    "browserstack-local": "1.3.0",
+    "browserstack-local": "^1.3.3",
     "codelyzer": "4.0.2",
     "conventional-changelog-cli": "1.3.4",
     "del": "3.0.0",
     "doc-prsr": "^2.1.0",
-    "firebase-tools": "^3.17.4",
+    "firebase-tools": "^3.18.6",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "3.1.1",
     "gulp-clean-css": "3.0.4",
@@ -144,7 +144,7 @@
     "karma-sauce-launcher": "1.2.0",
     "karma-spec-reporter": "0.0.32",
     "npm-run-all": "4.0.1",
-    "protractor": "5.2.2",
+    "protractor": "^5.3.2",
     "pump": "1.0.2",
     "rimraf": "2.6.1",
     "rollup-plugin-node-resolve": "3.0.0",
diff --git a/src/framework/theme/components/spinner/_spinner.component.theme.scss b/src/framework/theme/components/spinner/_spinner.component.theme.scss
new file mode 100644
index 0000000000..aa144d079e
--- /dev/null
+++ b/src/framework/theme/components/spinner/_spinner.component.theme.scss
@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-spinner-theme() {
+
+  .nb-spinner-container {
+    position: relative;
+  }
+
+  nb-spinner {
+    background-color: nb-theme(spinner-bg);
+
+    &.active-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-active-bg);
+    }
+    &.disabled-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-disabled-bg);
+    }
+    &.primary-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-primary-bg);
+    }
+    &.info-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-info-bg);
+    }
+    &.success-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-success-bg);
+    }
+    &.warning-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-warning-bg);
+    }
+    &.danger-spinner .spin-circle {
+      border-right-color: nb-theme(spinner-danger-bg);
+    }
+
+    .spin-circle {
+      border-left-color: nb-theme(spinner-circle-bg);
+      border-top-color: nb-theme(spinner-circle-bg);
+      border-bottom-color: nb-theme(spinner-circle-bg);
+    }
+
+    .message {
+      color: nb-theme(spinner-fg);
+    }
+
+    &.xxsmall-spinner {
+      font-size: nb-theme(spinner-xxsmall);
+    }
+    &.xsmall-spinner {
+      font-size: nb-theme(spinner-xsmall);
+    }
+    &.small-spinner {
+      font-size: nb-theme(spinner-small);
+    }
+    &.medium-spinner {
+      font-size: nb-theme(spinner-medium);
+    }
+    &.large-spinner {
+      font-size: nb-theme(spinner-large);
+    }
+    &.xlarge-spinner {
+      font-size: nb-theme(spinner-xlarge);
+    }
+    &.xxlarge-spinner {
+      font-size: nb-theme(spinner-xxlarge);
+    }
+  }
+
+  @-webkit-keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    40% {
+      transform: rotate(230deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
diff --git a/src/framework/theme/components/spinner/spinner.component.scss b/src/framework/theme/components/spinner/spinner.component.scss
new file mode 100644
index 0000000000..be3feaf1d2
--- /dev/null
+++ b/src/framework/theme/components/spinner/spinner.component.scss
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  opacity: 1;
+  position: absolute;
+  border-radius: inherit;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  overflow: hidden;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  visibility: visible;
+
+  .spin-circle {
+    animation: spin 0.8s infinite linear;
+    border-radius: 50%;
+    border-style: solid;
+    border-width: 0.125em;
+    width: 1em;
+    height: 1em;
+  }
+
+  .message {
+    margin-left: 0.5rem;
+    line-height: 1rem;
+    font-size: 1rem;
+  }
+}
diff --git a/src/framework/theme/components/spinner/spinner.component.ts b/src/framework/theme/components/spinner/spinner.component.ts
new file mode 100644
index 0000000000..830e1b8447
--- /dev/null
+++ b/src/framework/theme/components/spinner/spinner.component.ts
@@ -0,0 +1,136 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, HostBinding, Input } from '@angular/core';
+
+/**
+ * Styled spinner component
+ */
+@Component({
+  selector: 'nb-spinner',
+  template: `
+    <span class="spin-circle"></span>
+    <span class="message" *ngIf="message">{{ message }}</span>
+  `,
+  styleUrls: ['./spinner.component.scss'],
+})
+export class NbSpinnerComponent {
+
+  static readonly SIZE_XXSMALL = 'xxsmall';
+  static readonly SIZE_XSMALL = 'xsmall';
+  static readonly SIZE_SMALL = 'small';
+  static readonly SIZE_MEDIUM = 'medium';
+  static readonly SIZE_LARGE = 'large';
+  static readonly SIZE_XLARGE = 'xlarge';
+  static readonly SIZE_XXLARGE = 'xxlarge';
+
+  static readonly STATUS_ACTIVE = 'active';
+  static readonly STATUS_DISABLED = 'disabled';
+  static readonly STATUS_PRIMARY = 'primary';
+  static readonly STATUS_INFO = 'info';
+  static readonly STATUS_SUCCESS = 'success';
+  static readonly STATUS_WARNING = 'warning';
+  static readonly STATUS_DANGER = 'danger';
+
+  size: string = NbSpinnerComponent.SIZE_MEDIUM;
+  status: string = NbSpinnerComponent.STATUS_ACTIVE;
+
+  /**
+   * Loading text that is shown near the icon
+   * @type string
+   */
+  @Input() message: string = 'Loading...';
+
+  /**
+   * Spiiner size, available sizes:
+   * xxsmall, xsmall, small, medium, large, xlarge, xxlarge
+   * @param {string} val
+   */
+  @Input('size')
+  private set setSize(val: string) {
+    this.size = val;
+  }
+
+  /**
+   * Spiiner status (adds specific styles):
+   * active, disabled, primary, info, success, warning, danger
+   * @param {string} val
+   */
+  @Input('status')
+  private set setStatus(val: string) {
+    this.status = val;
+  }
+
+  @HostBinding('class.xxsmall-spinner')
+  get xxsmall() {
+    return this.size === NbSpinnerComponent.SIZE_XXSMALL;
+  }
+
+  @HostBinding('class.xsmall-spinner')
+  get xsmall() {
+    return this.size === NbSpinnerComponent.SIZE_XSMALL;
+  }
+
+  @HostBinding('class.small-spinner')
+  get small() {
+    return this.size === NbSpinnerComponent.SIZE_SMALL;
+  }
+
+  @HostBinding('class.medium-spinner')
+  get medium() {
+    return this.size === NbSpinnerComponent.SIZE_MEDIUM;
+  }
+
+  @HostBinding('class.large-spinner')
+  get large() {
+    return this.size === NbSpinnerComponent.SIZE_LARGE;
+  }
+
+  @HostBinding('class.xlarge-spinner')
+  get xlarge() {
+    return this.size === NbSpinnerComponent.SIZE_XLARGE;
+  }
+
+  @HostBinding('class.xxlarge-spinner')
+  get xxlarge() {
+    return this.size === NbSpinnerComponent.SIZE_XXLARGE;
+  }
+
+  @HostBinding('class.active-spinner')
+  get active() {
+    return this.status === NbSpinnerComponent.STATUS_ACTIVE;
+  }
+
+  @HostBinding('class.disabled-spinner')
+  get disabled() {
+    return this.status === NbSpinnerComponent.STATUS_DISABLED;
+  }
+
+  @HostBinding('class.primary-spinner')
+  get primary() {
+    return this.status === NbSpinnerComponent.STATUS_PRIMARY;
+  }
+
+  @HostBinding('class.info-spinner')
+  get info() {
+    return this.status === NbSpinnerComponent.STATUS_INFO;
+  }
+
+  @HostBinding('class.success-spinner')
+  get success() {
+    return this.status === NbSpinnerComponent.STATUS_SUCCESS;
+  }
+
+  @HostBinding('class.warning-spinner')
+  get warning() {
+    return this.status === NbSpinnerComponent.STATUS_WARNING;
+  }
+
+  @HostBinding('class.danger-spinner')
+  get danger() {
+    return this.status === NbSpinnerComponent.STATUS_DANGER;
+  }
+}
diff --git a/src/framework/theme/components/spinner/spinner.directive.ts b/src/framework/theme/components/spinner/spinner.directive.ts
new file mode 100644
index 0000000000..c940006754
--- /dev/null
+++ b/src/framework/theme/components/spinner/spinner.directive.ts
@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  ComponentFactoryResolver,
+  ComponentFactory,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  Input,
+  OnInit,
+  Renderer2,
+  ViewContainerRef, HostBinding,
+} from '@angular/core';
+import { NbSpinnerComponent } from './spinner.component';
+
+/**
+ * Styled spinner directive
+ *
+ * @stacked-example(Spinner Showcase, spinner/spinner-card.component)
+ *
+ *
+ * ```ts
+ * <nb-card [nbSpinner]="loading" nbSpinnerStatus="danger">
+ *   <nb-card-body>Card Content</nb-card-body>
+ * </nb-card>
+ * ```
+ *
+ * Could be colored using `status` property
+ *
+ * @stacked-example(Spinner Colors, spinner/spinner-colors.component)
+ *
+ * Available in different sizes with `size` property:
+ *
+ * @stacked-example(Spinner Sizes, spinner/spinner-sizes.component)
+ *
+ * It is also possible to place it into the button:
+ * @stacked-example(Buttons with spinner, spinner/spinner-button.component)
+ *
+ * Or tabs:
+ * @stacked-example(Spinner in tabs, spinner/spinner-tabs.component)
+ */
+@Directive({selector: '[nbSpinner]'})
+export class NbSpinnerDirective implements OnInit {
+
+  spinner: ComponentRef<NbSpinnerComponent>;
+  componentFactory: ComponentFactory<NbSpinnerComponent>;
+
+  @HostBinding('class.nb-spinner-container') isSpinnerExist = false;
+
+  /**
+   * Spinner message shown next to the icon
+   * @type {string}
+   */
+  @Input('nbSpinnerMessage') spinnerMessage: string;
+
+  /**
+   * Spinner status color active, disabled, primary, info, success, warning, danger
+   * @type {string}
+   */
+  @Input('nbSpinnerStatus') spinnerStatus: string;
+
+  /**
+   * Spinner size, available sizes: xxsmall, xsmall, small, medium, large, xlarge, xxlarge
+   * @type {string}
+   */
+  @Input('nbSpinnerSize') spinnerSize: string;
+
+  /**
+   * Directive value - show or hide spinner
+   * @param {boolean} val
+   */
+  @Input('nbSpinner')
+  set nbSpinner(val: boolean) {
+    if (this.componentFactory) {
+      if (val) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    } else {
+      this.shouldShow = val;
+    }
+  }
+
+  private shouldShow = false;
+
+  constructor(private directiveView: ViewContainerRef,
+              private componentFactoryResolver: ComponentFactoryResolver,
+              private renderer: Renderer2,
+              private directiveElement: ElementRef) {
+  }
+
+  ngOnInit() {
+    this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(NbSpinnerComponent);
+    if (this.shouldShow) {
+      this.show();
+    }
+  }
+
+  hide() {
+    if (this.isSpinnerExist) {
+      this.directiveView.remove();
+      this.isSpinnerExist = false;
+    }
+  }
+
+  show() {
+    if (!this.isSpinnerExist) {
+      this.spinner = this.directiveView.createComponent<NbSpinnerComponent>(this.componentFactory);
+      this.setInstanceInputs(this.spinner.instance);
+      this.spinner.changeDetectorRef.detectChanges();
+      this.renderer.appendChild(this.directiveElement.nativeElement, this.spinner.location.nativeElement);
+      this.isSpinnerExist = true;
+    }
+  }
+
+  setInstanceInputs(instance: NbSpinnerComponent) {
+    typeof this.spinnerMessage !== 'undefined' && (instance.message = this.spinnerMessage);
+    typeof this.spinnerStatus !== 'undefined' && (instance.status = this.spinnerStatus);
+    typeof this.spinnerSize !== 'undefined' && (instance.size = this.spinnerSize);
+  }
+}
diff --git a/src/framework/theme/components/spinner/spinner.module.ts b/src/framework/theme/components/spinner/spinner.module.ts
new file mode 100644
index 0000000000..1fae235c2e
--- /dev/null
+++ b/src/framework/theme/components/spinner/spinner.module.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { NbSharedModule } from '../shared/shared.module';
+import { NbSpinnerComponent } from './spinner.component';
+import { NbSpinnerDirective } from './spinner.directive';
+
+
+@NgModule({
+  imports: [
+    NbSharedModule,
+  ],
+  exports: [NbSpinnerComponent, NbSpinnerDirective],
+  declarations: [NbSpinnerComponent, NbSpinnerDirective],
+  entryComponents: [NbSpinnerComponent],
+})
+export class NbSpinnerModule {}
diff --git a/src/framework/theme/components/spinner/spinner.spec.ts b/src/framework/theme/components/spinner/spinner.spec.ts
new file mode 100644
index 0000000000..d233311ad8
--- /dev/null
+++ b/src/framework/theme/components/spinner/spinner.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NbSpinnerComponent } from './spinner.component';
+
+describe('Component: NbSpinner', () => {
+
+  let spinner: NbSpinnerComponent;
+  let fixture: ComponentFixture<NbSpinnerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NbSpinnerComponent],
+    });
+
+    fixture = TestBed.createComponent(NbSpinnerComponent);
+    spinner = fixture.componentInstance;
+  });
+
+  it('should set class danger', () => {
+    spinner.status = 'danger';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('danger-spinner'))
+      .toBeTruthy()
+  });
+
+  it('should set size small', () => {
+    spinner.size = 'small';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('small-spinner'))
+      .toBeTruthy()
+  });
+
+  it('should set message', () => {
+    spinner.message = 'Loading your content...';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.querySelector('.message').textContent)
+      .toEqual(spinner.message);
+  });
+
+  it('should not have message tab when no message', () => {
+    spinner.message = '';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.querySelector('.message'))
+      .toBeNull();
+  });
+});
diff --git a/src/framework/theme/components/tabset/tabset.component.scss b/src/framework/theme/components/tabset/tabset.component.scss
index 2a877f967c..11db456a92 100644
--- a/src/framework/theme/components/tabset/tabset.component.scss
+++ b/src/framework/theme/components/tabset/tabset.component.scss
@@ -16,7 +16,6 @@
     flex: 1;
     -ms-flex: 1 1 auto;
     overflow: auto;
-
     display: none;
     &.content-active {
       display: block;
diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts
index 134850a450..72ee1557d4 100644
--- a/src/framework/theme/index.ts
+++ b/src/framework/theme/index.ts
@@ -43,3 +43,5 @@ export * from './components/chat/chat-message-quote.component';
 export * from './components/chat/chat-message-text.component';
 export * from './components/chat/chat-form.component';
 export * from './components/chat/chat.module';
+export * from './components/spinner/spinner.component';
+export * from './components/spinner/spinner.module';
diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss
index 6cca0ac345..248a9f6f3a 100644
--- a/src/framework/theme/styles/global/_components.scss
+++ b/src/framework/theme/styles/global/_components.scss
@@ -22,6 +22,7 @@
 @import '../../components/context-menu/context-menu.component.theme';
 @import '../../components/alert/alert.component.theme';
 @import '../../components/chat/chat.component.theme';
+@import '../../components/spinner/spinner.component.theme';
 
 @mixin nb-theme-components() {
 
@@ -36,6 +37,7 @@
   @include nb-user-theme();
   @include nb-actions-theme();
   @include nb-search-theme();
+  @include nb-spinner-theme();
   @include nb-checkbox-theme();
   @include nb-progress-bar-theme();
   @include nb-badge-theme();
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
index 6f8c62ba09..ed2e85f451 100644
--- a/src/framework/theme/styles/themes/_cosmic.scss
+++ b/src/framework/theme/styles/themes/_cosmic.scss
@@ -146,6 +146,8 @@ $theme: (
   badge-info-bg-color: color-info,
   badge-warning-bg-color: color-warning,
   badge-danger-bg-color: color-danger,
+
+  spinner-bg: rgba(61, 55, 128, 0.9),
 );
 
 // register the theme
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 84c6d0b365..c6c625d2d7 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -532,6 +532,25 @@ $theme: (
   chat-success-bg: color-success,
   chat-warning-bg: color-warning,
   chat-danger-bg: color-danger,
+
+  spinner-bg: rgba(255, 255, 255, 0.83),
+  spinner-circle-bg: color-bg-active,
+  spinner-fg: color-fg-text,
+  spinner-active-bg: color-fg,
+  spinner-disabled-bg: color-disabled,
+  spinner-disabled-fg: color-fg,
+  spinner-primary-bg: color-primary,
+  spinner-info-bg: color-info,
+  spinner-success-bg: color-success,
+  spinner-warning-bg: color-warning,
+  spinner-danger-bg: color-danger,
+  spinner-xxsmall: 1.25rem,
+  spinner-xsmall: 1.5rem,
+  spinner-small: 1.75rem,
+  spinner-medium: 2rem,
+  spinner-large: 2.25rem,
+  spinner-xlarge: 2.5rem,
+  spinner-xxlarge: 3rem,
 );
 
 // register the theme
diff --git a/src/playground/playground-routing.module.ts b/src/playground/playground-routing.module.ts
index ec6b66366a..ec072996b5 100644
--- a/src/playground/playground-routing.module.ts
+++ b/src/playground/playground-routing.module.ts
@@ -110,6 +110,11 @@ import { NbChatDropComponent } from './chat/chat-drop.component';
 import { NbChatMessageTypesShowcaseComponent } from './chat/chat-message-types-showcase.component';
 import { NbChatConversationShowcaseComponent } from './chat/chat-conversation-showcase.component';
 import { NbChatTestComponent } from './chat/chat-test.component';
+import { NbSpinnerCardComponent } from './spinner/spinner-card.component';
+import { NbSpinnerButtonComponent } from './spinner/spinner-button.component';
+import { NbSpinnerTabsComponent } from './spinner/spinner-tabs.component';
+import { NbSpinnerSizesComponent } from './spinner/spinner-sizes.component';
+import { NbSpinnerColorsComponent } from './spinner/spinner-colors.component';
 
 export const routes: Routes = [
   {
@@ -166,6 +171,31 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'spinner',
+        children: [
+          {
+            path: 'spinner-card.component',
+            component: NbSpinnerCardComponent,
+          },
+          {
+            path: 'spinner-tabs.component',
+            component: NbSpinnerTabsComponent,
+          },
+          {
+            path: 'spinner-button.component',
+            component: NbSpinnerButtonComponent,
+          },
+          {
+            path: 'spinner-sizes.component',
+            component: NbSpinnerSizesComponent,
+          },
+          {
+            path: 'spinner-colors.component',
+            component: NbSpinnerColorsComponent,
+          },
+        ],
+      },
       {
         path: 'card',
         children: [
diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts
index 484ed2879d..43681f88f1 100644
--- a/src/playground/playground.module.ts
+++ b/src/playground/playground.module.ts
@@ -25,6 +25,7 @@ import {
   NbProgressBarModule,
   NbAlertModule,
   NbChatModule,
+  NbSpinnerModule,
 } from '@nebular/theme';
 
 import { NbPlaygroundRoutingModule } from './playground-routing.module';
@@ -134,6 +135,11 @@ import { NbChatDropComponent } from './chat/chat-drop.component';
 import { NbChatMessageTypesShowcaseComponent } from './chat/chat-message-types-showcase.component';
 import { NbChatConversationShowcaseComponent } from './chat/chat-conversation-showcase.component';
 import { NbChatTestComponent } from './chat/chat-test.component';
+import { NbSpinnerCardComponent } from './spinner/spinner-card.component';
+import { NbSpinnerTabsComponent } from './spinner/spinner-tabs.component';
+import { NbSpinnerButtonComponent } from './spinner/spinner-button.component';
+import { NbSpinnerSizesComponent } from './spinner/spinner-sizes.component';
+import { NbSpinnerColorsComponent } from './spinner/spinner-colors.component';
 
 export const NB_MODULES = [
   NbCardModule,
@@ -158,6 +164,7 @@ export const NB_MODULES = [
   NbChatModule.forChild({
     messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
   }),
+  NbSpinnerModule,
 ];
 
 export const NB_EXAMPLE_COMPONENTS = [
@@ -259,6 +266,11 @@ export const NB_EXAMPLE_COMPONENTS = [
   NbChatMessageTypesShowcaseComponent,
   NbChatConversationShowcaseComponent,
   NbChatTestComponent,
+  NbSpinnerCardComponent,
+  NbSpinnerTabsComponent,
+  NbSpinnerButtonComponent,
+  NbSpinnerSizesComponent,
+  NbSpinnerColorsComponent,
 ];
 
 
diff --git a/src/playground/spinner/spinner-button.component.ts b/src/playground/spinner/spinner-button.component.ts
new file mode 100644
index 0000000000..af624315c1
--- /dev/null
+++ b/src/playground/spinner/spinner-button.component.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-app-spinner-button',
+  template: `
+     <nb-card accent="primary" size="small">
+      <nb-card-body>
+        <div class="d-flex align-items-start">
+          <button class="button-container btn btn-success btn-lg" (click)="toggleLoadingAnimation()"
+                  [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
+            Download
+          </button>
+
+          <button class="button-container btn btn-primary btn-lg" (click)="toggleLoadingAnimation()"
+                  [nbSpinner]="loading" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
+            Download
+          </button>
+
+          <button class="button-container btn btn-warning btn-lg" (click)="toggleLoadingAnimation()"
+                  [nbSpinner]="loading" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
+            Download
+          </button>
+
+          <button class="button-container btn btn-danger btn-md" (click)="toggleLoadingAnimation()"
+                  [nbSpinner]="loading" nbSpinnerStatus="danger" nbSpinnerMessage="">
+            Download
+          </button>
+
+          <button class="button-container btn btn-info btn-md" (click)="toggleLoadingAnimation()"
+                  [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
+            Download
+          </button>
+
+          <button class="button-container btn btn-info btn-sm" (click)="toggleLoadingAnimation()"
+                  [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="xsmall" nbSpinnerMessage="">
+            Download
+          </button>
+        </div>
+      </nb-card-body>
+    </nb-card>
+  `,
+  styles: [`
+    :host .button-container {
+      margin: 1rem;
+    }
+  `],
+})
+export class NbSpinnerButtonComponent {
+
+  loading = false;
+
+  toggleLoadingAnimation() {
+    this.loading = true;
+    setTimeout(() => this.loading = false, 3000);
+  }
+}
diff --git a/src/playground/spinner/spinner-card.component.ts b/src/playground/spinner/spinner-card.component.ts
new file mode 100644
index 0000000000..953ee1c853
--- /dev/null
+++ b/src/playground/spinner/spinner-card.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-app-spinner-card',
+  template: `
+    <nb-card accent="danger" size="xsmall" [nbSpinner]="loading" nbSpinnerStatus="danger" nbSpinnerSize="xlarge">
+      <nb-card-header>Spinners</nb-card-header>
+      <nb-card-body>
+        <p>
+          A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
+          Originally, nebula was a name for any diffuse astronomical object.
+        </p>
+        <button class="btn btn-info btn-sm" (click)="toggleLoadingAnimation()">Reload</button>
+
+      </nb-card-body>
+    </nb-card>
+  `,
+})
+export class NbSpinnerCardComponent {
+
+  loading = false;
+
+  toggleLoadingAnimation() {
+    this.loading = true;
+    setTimeout(() => this.loading = false, 3000);
+  }
+}
diff --git a/src/playground/spinner/spinner-colors.component.html b/src/playground/spinner/spinner-colors.component.html
new file mode 100644
index 0000000000..78f6ef3e84
--- /dev/null
+++ b/src/playground/spinner/spinner-colors.component.html
@@ -0,0 +1,42 @@
+<nb-card [nbSpinner]="true" nbSpinnerStatus="active">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerStatus="disabled">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerStatus="warning">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerStatus="danger">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerStatus="success">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerStatus="info">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerStatus="primary">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
diff --git a/src/playground/spinner/spinner-colors.component.ts b/src/playground/spinner/spinner-colors.component.ts
new file mode 100644
index 0000000000..a8ad33d534
--- /dev/null
+++ b/src/playground/spinner/spinner-colors.component.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-spinner-colors',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './spinner-colors.component.html',
+})
+export class NbSpinnerColorsComponent {
+}
diff --git a/src/playground/spinner/spinner-sizes.component.html b/src/playground/spinner/spinner-sizes.component.html
new file mode 100644
index 0000000000..ad2099fc97
--- /dev/null
+++ b/src/playground/spinner/spinner-sizes.component.html
@@ -0,0 +1,41 @@
+<nb-card [nbSpinner]="true" nbSpinnerSize="xxsmall">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerSize="xsmall">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerSize="small">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerSize="medium">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerSize="large">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerSize="xlarge">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
+
+<nb-card [nbSpinner]="true" nbSpinnerSize="xxlarge">
+  <nb-card-body>
+    Some card content.
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/spinner/spinner-sizes.component.ts b/src/playground/spinner/spinner-sizes.component.ts
new file mode 100644
index 0000000000..0fc3749170
--- /dev/null
+++ b/src/playground/spinner/spinner-sizes.component.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-spinner-sizes',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './spinner-sizes.component.html',
+})
+export class NbSpinnerSizesComponent {
+}
diff --git a/src/playground/spinner/spinner-tabs.component.ts b/src/playground/spinner/spinner-tabs.component.ts
new file mode 100644
index 0000000000..f34d5410bc
--- /dev/null
+++ b/src/playground/spinner/spinner-tabs.component.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-app-spinner-tabs',
+  template: `
+    <nb-card size="xsmall">
+      <nb-card-body>
+
+        <nb-tabset fullWidth (changeTab)="toggleLoadingAnimation()">
+          <nb-tab tabTitle="Tab 1" [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="xxlarge">
+            <p>
+              A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
+              Originally, nebula was a name for any diffuse astronomical object.
+            </p>
+          </nb-tab>
+
+          <nb-tab tabTitle="Tab 2" [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="xxlarge">
+            <p>
+              Nebular's primary goal is to assemble together and connect the most awesome features and libraries
+              creating an efficient ecosystem to speed up and simplify the development.
+            </p>
+          </nb-tab>
+
+        </nb-tabset>
+      </nb-card-body>
+    </nb-card>
+  `,
+  styles: [`
+    :host nb-tab {
+      padding: 1.25rem;
+    }
+  `],
+})
+export class NbSpinnerTabsComponent {
+
+  loading = false;
+
+  toggleLoadingAnimation() {
+    this.loading = true;
+    setTimeout(() => this.loading = false, 20000)
+  }
+}