├── .gitattributes
├── .npmignore
├── src
    ├── index.js
    ├── css
    │   ├── global.css
    │   ├── pulse.css
    │   ├── rotating-plane.css
    │   ├── double-bounce.css
    │   ├── flow.css
    │   ├── swing.css
    │   ├── wave.css
    │   ├── grid-cube.css
    │   ├── wander-cube.css
    │   ├── fold-cube.css
    │   ├── chasing-dots.css
    │   ├── circle.css
    │   └── fading-circle.css
    └── Spinner.svelte
├── .gitignore
├── dev
    ├── main.js
    └── App.svelte
├── rollup.config.js
├── public
    └── index.html
├── README.md
├── package.json
└── rollup.dev.config.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.svelte linguist-vendored


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | dev
2 | docs
3 | node_modules


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Spinner } from "./Spinner.svelte";
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/bundle.*
4 | package-lock.json
5 | yarn.lock


--------------------------------------------------------------------------------
/dev/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 | 
3 | const app = new App({
4 | 	target: document.body,
5 | });
6 | 
7 | export default app;


--------------------------------------------------------------------------------
/src/css/global.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --sk-size: 40px;
 3 |   --sk-color: #333;
 4 | }
 5 | 
 6 | .sk-spinner {
 7 |   color: #333;
 8 | }
 9 | 
10 | .sk-spinner > div {
11 |   background-color: currentColor;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/css/pulse.css:
--------------------------------------------------------------------------------
 1 | .sk-pulse {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   background-color: currentColor;
 5 |   border-radius: 100%;
 6 |   animation: sk-scaleout 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
 7 | }
 8 | 
 9 | @keyframes sk-scaleout {
10 |   0% {
11 |     transform: scale(0);
12 |   }
13 |   100% {
14 |     transform: scale(1);
15 |     opacity: 0;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/css/rotating-plane.css:
--------------------------------------------------------------------------------
 1 | .sk-rotating-plane > div {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   background-color: currentColor;
 5 |   animation: sk-plane 1.2s infinite ease-in-out;
 6 | }
 7 | 
 8 | @keyframes sk-plane {
 9 |   0% {
10 |     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
11 |   }
12 |   50% {
13 |     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
14 |   }
15 |   100% {
16 |     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from "rollup-plugin-svelte";
 2 | import bundleSize from "rollup-plugin-bundle-size";
 3 | import resolve from "rollup-plugin-node-resolve";
 4 | import commonjs from "rollup-plugin-commonjs";
 5 | import { terser } from "rollup-plugin-terser";
 6 | import pkg from "./package.json";
 7 | 
 8 | export default [
 9 |   {
10 |     input: "src/index.js",
11 |     output: [
12 |       { file: pkg.module, format: "es" },
13 |       { file: pkg.main, format: "umd", name: "Swipe" },
14 |     ],
15 |     plugins: [svelte(), commonjs(), resolve(), terser(), bundleSize()],
16 |   },
17 | ];
18 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf8" />
 5 |     <meta name="viewport" content="width=device-width" />
 6 | 
 7 |     <title>Svelte Spinkit</title>
 8 | 
 9 |     <link rel="icon" type="image/png" href="/favicon.png" />
10 |     <link rel="stylesheet" href="global.css" />
11 |     <link rel="stylesheet" href="bundle.css" />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |   </head>
17 | 
18 |   <body></body>
19 |   <script src="bundle.js"></script>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/css/double-bounce.css:
--------------------------------------------------------------------------------
 1 | .sk-double-bounce {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   position: relative;
 5 | }
 6 | 
 7 | .sk-double-bounce > div {
 8 |   width: 100%;
 9 |   height: 100%;
10 |   border-radius: 50%;
11 |   background-color: currentColor;
12 |   opacity: 0.6;
13 |   position: absolute;
14 |   top: 0;
15 |   left: 0;
16 |   animation: sk-double-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
17 | }
18 | 
19 | .sk-double-bounce > div:nth-child(2) {
20 |   animation-delay: -1s;
21 | }
22 | 
23 | @keyframes sk-double-bounce {
24 |   0%,
25 |   100% {
26 |     transform: scale(0);
27 |   }
28 |   45%,
29 |   55% {
30 |     transform: scale(1);
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/css/flow.css:
--------------------------------------------------------------------------------
 1 | .sk-flow-dot {
 2 |   width: calc(var(--sk-size) * 1.3);
 3 |   height: calc(var(--sk-size) * 1.3);
 4 |   display: flex;
 5 |   justify-content: space-between;
 6 | }
 7 | 
 8 | .sk-flow-dot > div {
 9 |   width: 25%;
10 |   height: 25%;
11 |   background-color: currentColor;
12 |   border-radius: 50%;
13 |   animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite
14 |     both;
15 | }
16 | 
17 | .sk-flow-dot > div:nth-child(1) {
18 |   animation-delay: -0.3s;
19 | }
20 | .sk-flow-dot > div:nth-child(2) {
21 |   animation-delay: -0.15s;
22 | }
23 | 
24 | @keyframes sk-flow {
25 |   0%,
26 |   80%,
27 |   100% {
28 |     transform: scale(0.3);
29 |   }
30 |   40% {
31 |     transform: scale(1);
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/css/swing.css:
--------------------------------------------------------------------------------
 1 | .sk-swing-dot {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   position: relative;
 5 |   animation: sk-swing 1.8s infinite linear;
 6 | }
 7 | 
 8 | .sk-swing-dot > div {
 9 |   width: 45%;
10 |   height: 45%;
11 |   position: absolute;
12 |   top: 0;
13 |   left: 0;
14 |   right: 0;
15 |   margin: auto;
16 |   background-color: currentColor;
17 |   border-radius: 100%;
18 |   animation: sk-swing-dot 2s infinite ease-in-out;
19 | }
20 | 
21 | .sk-swing-dot > div:nth-child(2) {
22 |   top: auto;
23 |   bottom: 0;
24 |   animation-delay: -1s;
25 | }
26 | 
27 | @keyframes sk-swing {
28 |   100% {
29 |     transform: rotate(360deg);
30 |   }
31 | }
32 | 
33 | @keyframes sk-swing-dot {
34 |   0%,
35 |   100% {
36 |     transform: scale(0.2);
37 |   }
38 |   50% {
39 |     transform: scale(1);
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/css/wave.css:
--------------------------------------------------------------------------------
 1 | .sk-wave {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   display: flex;
 5 |   justify-content: space-between;
 6 | }
 7 | 
 8 | .sk-wave > div {
 9 |   background-color: currentColor;
10 |   height: 100%;
11 |   width: 15%;
12 |   animation: sk-wave 1.2s infinite ease-in-out;
13 | }
14 | 
15 | .sk-wave > div:nth-child(1) {
16 |   animation-delay: -1.2s;
17 | }
18 | .sk-wave > div:nth-child(2) {
19 |   animation-delay: -1.1s;
20 | }
21 | .sk-wave > div:nth-child(3) {
22 |   animation-delay: -1s;
23 | }
24 | .sk-wave > div:nth-child(4) {
25 |   animation-delay: -0.9s;
26 | }
27 | .sk-wave > div:nth-child(5) {
28 |   animation-delay: -0.8s;
29 | }
30 | 
31 | @keyframes sk-wave {
32 |   0%,
33 |   40%,
34 |   100% {
35 |     transform: scaleY(0.4);
36 |   }
37 |   20% {
38 |     transform: scaleY(1);
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-spinkit
 2 | 
 3 | A collection of loading indicators animated with CSS for Svelte
 4 | 
 5 | ![MIT License](https://badgen.net/badge/license/MIT/blue "MIT License")
 6 | [![view on npm](http://img.shields.io/npm/v/svelte-spinkit.svg?colorB=red)](https://www.npmjs.com/package/svelte-spinkit)
 7 |  [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)
 8 | 
 9 | 
10 | [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/svelte-spinkit-tdqiu)
11 | 
12 | 
13 | ## Installation
14 | 
15 | ```bash
16 | npm i svelte-spinkit
17 | ```
18 | 
19 | ## Usage
20 | 
21 | ### Bundler (Webpack, Rollup)
22 | 
23 | ```js
24 | import Spinner from 'svelte-spinkit';
25 | 
26 | <Spinner name="circle" />
27 | ```
28 | See more examples on the [demo page](https://codesandbox.io/s/svelte-spinkit-tdqiu).
29 | 
30 | 


--------------------------------------------------------------------------------
/src/css/grid-cube.css:
--------------------------------------------------------------------------------
 1 | /* Cube positions
 2 |     * 1 2 3
 3 |     * 4 5 6
 4 |     * 7 8 9
 5 | */
 6 | .sk-grid-cube{
 7 |   width: var(--sk-size);
 8 |   height: var(--sk-size);
 9 | }
10 | .sk-grid-cube > div {
11 |   width: 33.33%;
12 |   height: 33.33%;
13 |   background-color: currentColor;
14 |   float: left;
15 |   animation: sk-scaleDelay 1.3s infinite ease-in-out;
16 | }
17 | .sk-grid-cube > div:nth-child(1) {
18 |   animation-delay: 0.2s;
19 | }
20 | .sk-grid-cube > div:nth-child(2) {
21 |   animation-delay: 0.3s;
22 | }
23 | .sk-grid-cube > div:nth-child(3) {
24 |   animation-delay: 0.4s;
25 | }
26 | .sk-grid-cube > div:nth-child(4) {
27 |   animation-delay: 0.1s;
28 | }
29 | .sk-grid-cube > div:nth-child(5) {
30 |   animation-delay: 0.2s;
31 | }
32 | .sk-grid-cube > div:nth-child(6) {
33 |   animation-delay: 0.3s;
34 | }
35 | .sk-grid-cube > div:nth-child(7) {
36 |   animation-delay: 0s;
37 | }
38 | .sk-grid-cube > div:nth-child(8) {
39 |   animation-delay: 0.1s;
40 | }
41 | .sk-grid-cube > div:nth-child(9) {
42 |   animation-delay: 0.2s;
43 | }
44 | 
45 | @keyframes sk-scaleDelay {
46 |   0%,
47 |   70%,
48 |   100% {
49 |     transform: scale3D(1, 1, 1);
50 |   }
51 |   35% {
52 |     transform: scale3D(0, 0, 1);
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/css/wander-cube.css:
--------------------------------------------------------------------------------
 1 | .sk-wander-cube {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   background-color: currentColor;
 5 |   position: relative;
 6 | }
 7 | 
 8 | .sk-wander-cube > div {
 9 |   background-color: currentColor;
10 |   width: 20%;
11 |   height: 20%;
12 |   position: absolute;
13 |   top: 0;
14 |   left: 0;
15 |   --sk-wander-distance: calc(52px * 0.75);
16 |   animation: sk-cubemove 2s ease-in-out -2s infinite both;
17 |   animation: sk-cubemove 1.8s infinite ease-in-out;
18 | }
19 | .sk-wander-cube > div:nth-child(2) {
20 |   animation-delay: -0.5s;
21 | }
22 | .sk-wander-cube > div:nth-child(3) {
23 |   animation-delay: -1s;
24 | }
25 | 
26 | @keyframes sk-cubemove {
27 |   0% {
28 |     transform: rotate(0deg);
29 |   }
30 |   25% {
31 |     transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6);
32 |   }
33 |   50% {
34 |     /* Make FF rotate in the right direction */
35 |     transform: translateX(var(--sk-wander-distance))
36 |       translateY(var(--sk-wander-distance)) rotate(-179deg);
37 |   }
38 |   50.1% {
39 |     transform: translateX(var(--sk-wander-distance))
40 |       translateY(var(--sk-wander-distance)) rotate(-180deg);
41 |   }
42 |   75% {
43 |     transform: translateX(0) translateY(var(--sk-wander-distance))
44 |       rotate(-270deg) scale(0.6);
45 |   }
46 |   100% {
47 |     transform: rotate(-360deg);
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/css/fold-cube.css:
--------------------------------------------------------------------------------
 1 | .sk-folding-cube {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   position: relative;
 5 |   transform: rotateZ(45deg);
 6 | }
 7 | .sk-folding-cube > div {
 8 |   float: left;
 9 |   width: 50%;
10 |   height: 50%;
11 |   position: relative;
12 |   transform: scale(1.1);
13 | }
14 | 
15 | .sk-folding-cube > div:before {
16 |   content: "";
17 |   position: absolute;
18 |   top: 0;
19 |   left: 0;
20 |   width: 100%;
21 |   height: 100%;
22 |   background-color: currentColor;
23 |   animation: sk-fold 2.4s infinite linear both;
24 |   transform-origin: 100% 100%;
25 | }
26 | .sk-folding-cube > div:nth-child(2) {
27 |   transform: scale(1.1) rotateZ(90deg);
28 | }
29 | .sk-folding-cube > div:nth-child(4) {
30 |   transform: scale(1.1) rotateZ(180deg);
31 | }
32 | .sk-folding-cube > div:nth-child(3) {
33 |   transform: scale(1.1) rotateZ(270deg);
34 | }
35 | .sk-folding-cube > div:nth-child(2):before {
36 |   animation-delay: 0.3s;
37 | }
38 | .sk-folding-cube > div:nth-child(4):before {
39 |   animation-delay: 0.6s;
40 | }
41 | .sk-folding-cube > div:nth-child(3):before {
42 |   animation-delay: 0.9s;
43 | }
44 | 
45 | @keyframes sk-fold {
46 |   0%,
47 |   10% {
48 |     transform: perspective(140px) rotateX(-180deg);
49 |     opacity: 0;
50 |   }
51 |   25%,
52 |   75% {
53 |     transform: perspective(140px) rotateX(0deg);
54 |     opacity: 1;
55 |   }
56 |   90%,
57 |   100% {
58 |     transform: perspective(140px) rotateY(180deg);
59 |     opacity: 0;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-spinkit",
 3 |   "version": "1.0.2",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/heithemmoumni/svelte-spinkit"
 7 |   },
 8 |   "publishConfig": {
 9 |     "registry": "https://registry.npmjs.org/"
10 |   },
11 |   "bugs": {
12 |     "url": "https://github.com/heithemmoumni/svelte-spinkit/issues"
13 |   },
14 |   "author": {
15 |     "name": "Moumni Heithem",
16 |     "email": "moumniheithem@gmail.com",
17 |     "url": "http://hmoumni.com"
18 |   },
19 |   "license": "MIT",
20 |   "devDependencies": {
21 |     "npm-run-all": "^4.1.5",
22 |     "rollup": "^1.32.1",
23 |     "rollup-plugin-bundle-size": "^1.0.3",
24 |     "rollup-plugin-commonjs": "^10.1.0",
25 |     "rollup-plugin-css-bundle": "^1.0.4",
26 |     "rollup-plugin-livereload": "^1.3.0",
27 |     "rollup-plugin-node-resolve": "^5.2.0",
28 |     "rollup-plugin-svelte": "^5.2.3",
29 |     "rollup-plugin-terser": "^7.0.0",
30 |     "sirv-cli": "^0.4.5",
31 |     "svelte": "^3.21.0"
32 |   },
33 |   "scripts": {
34 |     "build": "rollup -c",
35 |     "autobuild": "rollup -c rollup.dev.config.js -w",
36 |     "dev": "run-p start:dev autobuild",
37 |     "start": "sirv public --single",
38 |     "start:dev": "sirv public --single --dev"
39 |   },
40 |   "keywords": [
41 |     "svelte",
42 |     "svelte.js",
43 |     "sveltejs",
44 |     "svelte-spinkit",
45 |     "spinkit"
46 |   ],
47 |   "dependencies": {
48 |     "@atomico/rollup-plugin-import-css": "^1.0.3",
49 |     "rollup-plugin-css-only": "^2.1.0"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/Spinner.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let name;
 3 |   export let color;
 4 |   import "./css/global.css";
 5 |   import "./css/wave.css";
 6 |   import "./css/circle.css";
 7 |   import "./css/fading-circle.css";
 8 |   import "./css/flow.css";
 9 |   import "./css/fold-cube.css";
10 |   import "./css/grid-cube.css";
11 |   import "./css/pulse.css";
12 |   import "./css/swing.css";
13 |   import "./css/wander-cube.css";
14 |   import "./css/double-bounce.css";
15 |   import "./css/rotating-plane.css";
16 |   import "./css/chasing-dots.css";
17 | 
18 |   const spinkitSpinners = {
19 |     circle: { className: "sk-circle", divCount: 12 },
20 |     "cube-grid": { className: "sk-grid-cube", divCount: 9 },
21 |     wave: { className: "sk-wave", divCount: 5 },
22 |     "folding-cube": { className: "sk-folding-cube", divCount: 4 },
23 |     "three-bounce": { className: "sk-three-bounce", divCount: 3 },
24 |     "double-bounce": { className: "sk-double-bounce", divCount: 2 },
25 |     "wandering-cubes": { className: "sk-wandering-cubes", divCount: 2 },
26 |     "chasing-dots": { className: "sk-chasing-dots", divCount: 2 },
27 |     "rotating-plane": { className: "sk-rotating-plane", divCount: 1 },
28 |     pulse: { className: "sk-pulse", divCount: 1 }
29 |   };
30 | 
31 |   const spinner = spinkitSpinners[name] || spinkitSpinners["three-bounce"];
32 | </script>
33 | 
34 | <style>
35 | 
36 | </style>
37 | 
38 | <div
39 |   class="sk-fade-in sk-fade-in {spinner['className']}"
40 |   style="color: {color || '#000'};">
41 |   {#each Array(spinner.divCount) as _, i}
42 |     <div />
43 |   {/each}
44 | </div>
45 | 


--------------------------------------------------------------------------------
/rollup.dev.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import svelte from "rollup-plugin-svelte";
 3 | import resolve from "rollup-plugin-node-resolve";
 4 | import commonjs from "rollup-plugin-commonjs";
 5 | import livereload from "rollup-plugin-livereload";
 6 | import { terser } from "rollup-plugin-terser";
 7 | import css from "rollup-plugin-css-only";
 8 | 
 9 | const production = !process.env.ROLLUP_WATCH;
10 | 
11 | export default {
12 |   input: "dev/main.js",
13 |   output: {
14 |     sourcemap: true,
15 |     format: "iife",
16 |     name: "app",
17 |     file: "public/bundle.js",
18 |     
19 |   },
20 |   plugins: [
21 |     svelte({
22 |       // enable run-time checks when not in production
23 |       dev: !production,
24 |       // we'll extract any component CSS out into
25 |       // a separate file — better for performance
26 |     }),
27 |     css({ output: "public/bundle.css" })
28 | 
29 | ,
30 |     // If you have external dependencies installed from
31 |     // npm, you'll most likely need these plugins. In
32 |     // some cases you'll need additional configuration —
33 |     // consult the documentation for details:
34 |     // https://github.com/rollup/rollup-plugin-commonjs
35 |     resolve({
36 |       browser: true,
37 |       dedupe: (importee) =>
38 |         importee === "svelte" || importee.startsWith("svelte/"),
39 |     }),
40 |     commonjs(),
41 | 
42 |     // Watch the `docs` directory and refresh the
43 |     // browser on changes when not in production
44 |     !production && livereload("public"),
45 | 
46 |     // If we're building for production (npm run build
47 |     // instead of npm run dev), minify
48 |     production && terser(),
49 |   ],
50 |   watch: {
51 |     clearScreen: false,
52 |   },
53 | };
54 | 


--------------------------------------------------------------------------------
/src/css/chasing-dots.css:
--------------------------------------------------------------------------------
 1 | .sk-chasing-dots {
 2 |   width: var(--sk-size);
 3 |   height: var(--sk-size);
 4 |   position: relative;
 5 |   animation: sk-chase 2.5s infinite linear both;
 6 | }
 7 | 
 8 | .sk-chasing-dots > div {
 9 |   width: 100%;
10 |   height: 100%;
11 |   position: absolute;
12 |   left: 0;
13 |   top: 0;
14 |   animation: sk-chase-dot 2s infinite ease-in-out both;
15 | }
16 | 
17 | .sk-chasing-dots > div:before {
18 |   content: "";
19 |   display: block;
20 |   width: 25%;
21 |   height: 25%;
22 |   background-color: currentColor;
23 |   border-radius: 100%;
24 |   animation: sk-chase-dot-before 2s infinite ease-in-out both;
25 | }
26 | 
27 | .sk-chasing-dots > div:nth-child(1) {
28 |   animation-delay: -1.1s;
29 | }
30 | .sk-chasing-dots > div:nth-child(2) {
31 |   animation-delay: -1s;
32 | }
33 | .sk-chasing-dots > div:nth-child(3) {
34 |   animation-delay: -0.9s;
35 | }
36 | .sk-chasing-dots > div:nth-child(4) {
37 |   animation-delay: -0.8s;
38 | }
39 | .sk-chasing-dots > div:nth-child(5) {
40 |   animation-delay: -0.7s;
41 | }
42 | .sk-chasing-dots > div:nth-child(6) {
43 |   animation-delay: -0.6s;
44 | }
45 | .sk-chasing-dots > div:nth-child(1):before {
46 |   animation-delay: -1.1s;
47 | }
48 | .sk-chasing-dots > div:nth-child(2):before {
49 |   animation-delay: -1s;
50 | }
51 | .sk-chasing-dots > div:nth-child(3):before {
52 |   animation-delay: -0.9s;
53 | }
54 | .sk-chasing-dots > div:nth-child(4):before {
55 |   animation-delay: -0.8s;
56 | }
57 | .sk-chasing-dots > div:nth-child(5):before {
58 |   animation-delay: -0.7s;
59 | }
60 | .sk-chasing-dots > div:nth-child(6):before {
61 |   animation-delay: -0.6s;
62 | }
63 | 
64 | @keyframes sk-chase {
65 |   100% {
66 |     transform: rotate(360deg);
67 |   }
68 | }
69 | 
70 | @keyframes sk-chase-dot {
71 |   80%,
72 |   100% {
73 |     transform: rotate(360deg);
74 |   }
75 | }
76 | 
77 | @keyframes sk-chase-dot-before {
78 |   50% {
79 |     transform: scale(0.4);
80 |   }
81 |   100%,
82 |   0% {
83 |     transform: scale(1);
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/css/circle.css:
--------------------------------------------------------------------------------
  1 | .sk-circle {
  2 |   width: var(--sk-size);
  3 |   height: var(--sk-size);
  4 |   position: relative;
  5 | }
  6 | 
  7 | .sk-circle > div {
  8 |   background-color: initial;
  9 |   width: 100%;
 10 |   height: 100%;
 11 |   position: absolute;
 12 |   left: 0;
 13 |   top: 0;
 14 | }
 15 | 
 16 | .sk-circle > div:before {
 17 |   content: "";
 18 |   display: block;
 19 |   width: 15%;
 20 |   height: 15%;
 21 |   background-color: currentColor;
 22 |   border-radius: 100%;
 23 |   animation: sk-circle 1.2s infinite ease-in-out both;
 24 | }
 25 | 
 26 | .sk-circle > div:nth-child(1) {
 27 |   transform: rotate(30deg);
 28 | }
 29 | .sk-circle > div:nth-child(2) {
 30 |   transform: rotate(60deg);
 31 | }
 32 | .sk-circle > div:nth-child(3) {
 33 |   transform: rotate(90deg);
 34 | }
 35 | .sk-circle > div:nth-child(4) {
 36 |   transform: rotate(120deg);
 37 | }
 38 | .sk-circle > div:nth-child(5) {
 39 |   transform: rotate(150deg);
 40 | }
 41 | .sk-circle > div:nth-child(6) {
 42 |   transform: rotate(180deg);
 43 | }
 44 | .sk-circle > div:nth-child(7) {
 45 |   transform: rotate(210deg);
 46 | }
 47 | .sk-circle > div:nth-child(8) {
 48 |   transform: rotate(240deg);
 49 | }
 50 | .sk-circle > div:nth-child(9) {
 51 |   transform: rotate(270deg);
 52 | }
 53 | .sk-circle > div:nth-child(10) {
 54 |   transform: rotate(300deg);
 55 | }
 56 | .sk-circle > div:nth-child(11) {
 57 |   transform: rotate(330deg);
 58 | }
 59 | .sk-circle > div:nth-child(1):before {
 60 |   animation-delay: -1.1s;
 61 | }
 62 | .sk-circle > div:nth-child(2):before {
 63 |   animation-delay: -1s;
 64 | }
 65 | .sk-circle > div:nth-child(3):before {
 66 |   animation-delay: -0.9s;
 67 | }
 68 | .sk-circle > div:nth-child(4):before {
 69 |   animation-delay: -0.8s;
 70 | }
 71 | .sk-circle > div:nth-child(5):before {
 72 |   animation-delay: -0.7s;
 73 | }
 74 | .sk-circle > div:nth-child(6):before {
 75 |   animation-delay: -0.6s;
 76 | }
 77 | .sk-circle > div:nth-child(7):before {
 78 |   animation-delay: -0.5s;
 79 | }
 80 | .sk-circle > div:nth-child(8):before {
 81 |   animation-delay: -0.4s;
 82 | }
 83 | .sk-circle > div:nth-child(9):before {
 84 |   animation-delay: -0.3s;
 85 | }
 86 | .sk-circle > div:nth-child(10):before {
 87 |   animation-delay: -0.2s;
 88 | }
 89 | .sk-circle > div:nth-child(11):before {
 90 |   animation-delay: -0.1s;
 91 | }
 92 | @keyframes sk-circle {
 93 |   0%,
 94 |   80%,
 95 |   100% {
 96 |     transform: scale(0);
 97 |   }
 98 |   40% {
 99 |     transform: scale(1);
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/src/css/fading-circle.css:
--------------------------------------------------------------------------------
  1 | .sk-circle-fade {
  2 |   width: var(--sk-size);
  3 |   height: var(--sk-size);
  4 |   position: relative;
  5 | }
  6 | 
  7 | .sk-circle-fade > div {
  8 |   width: 100%;
  9 |   height: 100%;
 10 |   position: absolute;
 11 |   left: 0;
 12 |   top: 0;
 13 | }
 14 | 
 15 | .sk-circle-fade > div:before {
 16 |   content: "";
 17 |   display: block;
 18 |   width: 15%;
 19 |   height: 15%;
 20 |   background-color: currentColor;
 21 |   border-radius: 100%;
 22 |   animation: sk-fadedelay 1.2s infinite ease-in-out both;
 23 | }
 24 | 
 25 | .sk-circle-fade > div:nth-child(1) {
 26 |   transform: rotate(30deg);
 27 | }
 28 | .sk-circle-fade > div:nth-child(2) {
 29 |   transform: rotate(60deg);
 30 | }
 31 | .sk-circle-fade > div:nth-child(3) {
 32 |   transform: rotate(90deg);
 33 | }
 34 | .sk-circle-fade > div:nth-child(4) {
 35 |   transform: rotate(120deg);
 36 | }
 37 | .sk-circle-fade > div:nth-child(5) {
 38 |   transform: rotate(150deg);
 39 | }
 40 | .sk-circle-fade > div:nth-child(6) {
 41 |   transform: rotate(180deg);
 42 | }
 43 | .sk-circle-fade > div:nth-child(7) {
 44 |   transform: rotate(210deg);
 45 | }
 46 | .sk-circle-fade > div:nth-child(8) {
 47 |   transform: rotate(240deg);
 48 | }
 49 | .sk-circle-fade > div:nth-child(9) {
 50 |   transform: rotate(270deg);
 51 | }
 52 | .sk-circle-fade > div:nth-child(10) {
 53 |   transform: rotate(300deg);
 54 | }
 55 | .sk-circle-fade > div:nth-child(11) {
 56 |   transform: rotate(330deg);
 57 | }
 58 | .sk-circle-fade > div:nth-child(1):before {
 59 |   animation-delay: -1.1s;
 60 | }
 61 | .sk-circle-fade > div:nth-child(2):before {
 62 |   animation-delay: -1s;
 63 | }
 64 | .sk-circle-fade > div:nth-child(3):before {
 65 |   animation-delay: -0.9s;
 66 | }
 67 | .sk-circle-fade > div:nth-child(4):before {
 68 |   animation-delay: -0.8s;
 69 | }
 70 | .sk-circle-fade > div:nth-child(5):before {
 71 |   animation-delay: -0.7s;
 72 | }
 73 | .sk-circle-fade > div:nth-child(6):before {
 74 |   animation-delay: -0.6s;
 75 | }
 76 | .sk-circle-fade > div:nth-child(7):before {
 77 |   animation-delay: -0.5s;
 78 | }
 79 | .sk-circle-fade > div:nth-child(8):before {
 80 |   animation-delay: -0.4s;
 81 | }
 82 | .sk-circle-fade > div:nth-child(9):before {
 83 |   animation-delay: -0.3s;
 84 | }
 85 | .sk-circle-fade > div:nth-child(10):before {
 86 |   animation-delay: -0.2s;
 87 | }
 88 | .sk-circle-fade > div:nth-child(11):before {
 89 |   animation-delay: -0.1s;
 90 | }
 91 | 
 92 | @keyframes sk-fadedelay {
 93 |   0%,
 94 |   39%,
 95 |   100% {
 96 |     opacity: 0;
 97 |     transform: scale(0.6);
 98 |   }
 99 |   40% {
100 |     opacity: 1;
101 |     transform: scale(1);
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/dev/App.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { Spinner } from "../src/index.js";
  3 | </script>
  4 | 
  5 | <style>
  6 |   code {
  7 |     padding: 5px 5px;
  8 |     margin-bottom: 35px;
  9 |     display: block;
 10 |     margin-top: 35px;
 11 |     background-color: rgba(0, 0, 0, 0.04);
 12 |     border-radius: 3px;
 13 |     font-family: "Liberation Mono", Courier, monospace;
 14 |     width: fit-content;
 15 |   }
 16 |   main {
 17 |     width: 60%;
 18 |     margin-bottom: 50px;
 19 |     padding: 20px 40px;
 20 |     margin: 0 auto;
 21 |   }
 22 |   .d-flex {
 23 |     display: flex;
 24 |     justify-content: space-between;
 25 |   }
 26 |   .d-flex > div {
 27 |     width: 100%;
 28 |   }
 29 | </style>
 30 | 
 31 | <main>
 32 |   <h1>Svelte-Spinkit</h1>
 33 |   <h2>
 34 |     <a href="https://github.com/heithemmoumni/svelte-Spinkit">
 35 |       Browse code on GitHub
 36 |     </a>
 37 |   </h2>
 38 |   <h3>Spinkit Spinners</h3>
 39 | 
 40 |   <div class="d-flex">
 41 |     <div>
 42 |       <code>&lt;Spinner name="circle" /&gt;</code>
 43 |       <Spinner name="circle" />
 44 |     </div>
 45 |     <div>
 46 |       <code>&lt;Spinner name="circle" color="red" /&gt;</code>
 47 |       <Spinner name="circle" color="red" />
 48 |     </div>
 49 |   </div>
 50 | 
 51 |   <div class="d-flex">
 52 |     <div>
 53 |       <code>&lt;Spinner name="pulse" /&gt;</code>
 54 |       <Spinner name="pulse" />
 55 |     </div>
 56 |     <div>
 57 |       <code>&lt;Spinner name="pulse" color="blue" /&gt;</code>
 58 |       <Spinner name="pulse" color="blue" />
 59 |     </div>
 60 |   </div>
 61 | 
 62 |   <div class="d-flex">
 63 | 
 64 |     <div>
 65 |       <code>&lt;Spinner name="cube-grid" /&gt;</code>
 66 |       <Spinner name="cube-grid" />
 67 |     </div>
 68 |     <div>
 69 |       <code>&lt;Spinner name="cube-grid" color="red" /&gt;</code>
 70 |       <Spinner name="cube-grid" color="red" />
 71 |     </div>
 72 | 
 73 |   </div>
 74 | 
 75 |   <div class="d-flex">
 76 | 
 77 |     <div>
 78 |       <code>&lt;Spinner name="wave" /&gt;</code>
 79 |       <Spinner name="wave" />
 80 |     </div>
 81 |     <div>
 82 |       <code>&lt;Spinner name="wave" color="red" /&gt;</code>
 83 |       <Spinner name="wave" color="red" />
 84 |     </div>
 85 | 
 86 |   </div>
 87 | 
 88 |   <div class="d-flex">
 89 | 
 90 |     <div>
 91 |       <code>&lt;Spinner name="folding-cube" /&gt;</code>
 92 |       <Spinner name="folding-cube" />
 93 |     </div>
 94 |     <div>
 95 |       <code>&lt;Spinner name="folding-cube" color="red" /&gt;</code>
 96 |       <Spinner name="folding-cube" color="red" />
 97 |     </div>
 98 | 
 99 |   </div>
100 | 
101 |   <div class="d-flex">
102 | 
103 |     <div>
104 | 
105 |       <code>&lt;Spinner name="double-bounce" /&gt;</code>
106 |       <Spinner name="double-bounce" />
107 |     </div>
108 |     <div>
109 | 
110 |       <code>&lt;Spinner name="double-bounce" color="red" /&gt;</code>
111 |       <Spinner name="double-bounce" color="red" />
112 |     </div>
113 |   </div>
114 | 
115 |   <div class="d-flex">
116 | 
117 |     <div>
118 |       <code>&lt;Spinner name="rotating-plane" /&gt;</code>
119 |       <Spinner name="rotating-plane" />
120 |     </div>
121 |     <div>
122 |       <code>&lt;Spinner name="rotating-plane" color="red" /&gt;</code>
123 |       <Spinner name="rotating-plane" color="red" />
124 |     </div>
125 |   </div>
126 | 
127 |   <div class="d-flex">
128 | 
129 |     <div>
130 |       <code>&lt;Spinner name="chasing-dots" /&gt;</code>
131 |       <Spinner name="chasing-dots" />
132 |     </div>
133 |     <div>
134 |       <code>&lt;Spinner name="chasing-dots" color="red" /&gt;</code>
135 |       <Spinner name="chasing-dots" color="red" />
136 |     </div>
137 |   </div>
138 | 
139 | </main>
140 | 


--------------------------------------------------------------------------------