Skip to content

Commit 29a0fe6

Browse files
Schum123Schum123
committed
Add more spinners
1 parent ae5c136 commit 29a0fe6

File tree

6 files changed

+193
-2
lines changed

6 files changed

+193
-2
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-loading-spinners",
3-
"version": "0.3.3",
3+
"version": "0.3.4",
44
"repository": {
55
"type": "git",
66
"url": "git+https://github.com/schum123/svelte-loading-spinners.git"

‎src/lib/ArrowDown.svelte‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script lang="ts">
2+
import type { SpinnerTypes } from './types/spinner.type';
3+
export let color: SpinnerTypes['color'] = '#FF3E00';
4+
export let unit: SpinnerTypes['unit'] = 'px';
5+
export let duration: SpinnerTypes['duration'] = '0.4s';
6+
export let size: SpinnerTypes['size'] = '15';
7+
export let pause: SpinnerTypes['pause'] = false;
8+
</script>
9+
10+
<div
11+
class="wrapper"
12+
class:pause-animation={pause}
13+
style="--size: {size}{unit}; --color: {color}; --duration: {duration};"
14+
/>
15+
16+
<style>
17+
.wrapper {
18+
width: var(--size);
19+
height: calc(var(--size) * 1.5);
20+
margin-left: var(--size);
21+
background: var(--color);
22+
display: inline-block;
23+
position: relative;
24+
box-sizing: border-box;
25+
animation: bump var(--duration) ease-in infinite alternate;
26+
}
27+
.wrapper::after {
28+
content: '';
29+
box-sizing: border-box;
30+
left: 50%;
31+
top: 100%;
32+
transform: translate(-50%, 0);
33+
position: absolute;
34+
border: var(--size) solid transparent;
35+
border-top-color: var(--color);
36+
}
37+
38+
.pause-animation {
39+
animation-play-state: paused;
40+
}
41+
@keyframes bump {
42+
0% {
43+
transform: translate(-50%, 5px);
44+
}
45+
100% {
46+
transform: translate(-50%, -5px);
47+
}
48+
}
49+
</style>

‎src/lib/ArrowUp.svelte‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script lang="ts">
2+
import type { SpinnerTypes } from './types/spinner.type';
3+
export let color: SpinnerTypes['color'] = '#FF3E00';
4+
export let unit: SpinnerTypes['unit'] = 'px';
5+
export let duration: SpinnerTypes['duration'] = '0.4s';
6+
export let size: SpinnerTypes['size'] = '15';
7+
export let pause: SpinnerTypes['pause'] = false;
8+
</script>
9+
10+
<div
11+
class="wrapper"
12+
class:pause-animation={pause}
13+
style="--size: {size}{unit}; --color: {color}; --duration: {duration};"
14+
/>
15+
16+
<style>
17+
.wrapper {
18+
width: var(--size);
19+
height: calc(var(--size) * 1.5);
20+
margin-left: var(--size);
21+
margin-top: var(--size);
22+
background: var(--color);
23+
display: inline-block;
24+
position: relative;
25+
box-sizing: border-box;
26+
animation: bump var(--duration) ease-in infinite alternate;
27+
}
28+
.wrapper::after {
29+
content: '';
30+
box-sizing: border-box;
31+
left: 50%;
32+
bottom: 100%;
33+
transform: translate(-50%, 0);
34+
position: absolute;
35+
border: var(--size) solid transparent;
36+
border-bottom-color: var(--color);
37+
}
38+
39+
.pause-animation {
40+
animation-play-state: paused;
41+
}
42+
@keyframes bump {
43+
0% {
44+
transform: translate(-50%, 5px);
45+
}
46+
100% {
47+
transform: translate(-50%, -5px);
48+
}
49+
}
50+
</style>

‎src/lib/Puff.svelte‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script lang="ts">
2+
import type { SpinnerTypes } from './types/spinner.type';
3+
import { range, durationUnitRegex, calculateRgba } from './utils';
4+
export let color: SpinnerTypes['color'] = '#FF3E00';
5+
export let unit: SpinnerTypes['unit'] = 'px';
6+
export let duration: SpinnerTypes['duration'] = '1s';
7+
export let size: SpinnerTypes['size'] = '60';
8+
export let pause: SpinnerTypes['pause'] = false;
9+
let durationUnit: string = duration.match(durationUnitRegex)?.[0] ?? 's';
10+
let durationNum: string = duration.replace(durationUnitRegex, '');
11+
let rgba: string;
12+
$: rgba = calculateRgba(color, 1);
13+
</script>
14+
15+
<span
16+
class="wrapper"
17+
style="--size: {size}{unit}; --color: {color}; --rgba: {rgba}; --duration: {duration}"
18+
>
19+
{#each range(2, 1) as version}
20+
<span
21+
class="circle"
22+
class:pause-animation={pause}
23+
style="animation-delay: {version === 1 ? '-1s' : '0s'}; animation-duration: {2 /
24+
+durationNum +
25+
durationUnit};"
26+
/>
27+
{/each}
28+
</span>
29+
30+
<style>
31+
.wrapper {
32+
display: inherit;
33+
position: relative;
34+
width: var(--size);
35+
height: var(--size);
36+
}
37+
.circle {
38+
position: absolute;
39+
width: var(--size);
40+
height: var(--size);
41+
border: thick solid var(--rgba);
42+
border-radius: 50%;
43+
opacity: 1;
44+
top: 0px;
45+
left: 0px;
46+
animation-fill-mode: both;
47+
animation-iteration-count: infinite;
48+
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1);
49+
animation-direction: normal, normal;
50+
animation-fill-mode: none, none;
51+
animation-play-state: running, running;
52+
animation-name: puff-1, puff-2;
53+
box-sizing: border-box;
54+
}
55+
.pause-animation {
56+
animation-play-state: paused;
57+
}
58+
@keyframes puff-1 {
59+
0% {
60+
transform: scale(0);
61+
}
62+
100% {
63+
transform: scale(1);
64+
}
65+
}
66+
@keyframes puff-2 {
67+
0% {
68+
opacity: 1;
69+
}
70+
100% {
71+
opacity: 0;
72+
}
73+
}
74+
</style>

‎src/lib/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,6 @@ export { default as Plane } from './Plane.svelte';
2222
export { default as Diamonds } from './Diamonds.svelte';
2323
export { default as Clock } from './Clock.svelte';
2424
export { default as Wave } from './Wave.svelte';
25+
export { default as Puff } from './Puff.svelte';
26+
export { default as ArrowDown } from './ArrowDown.svelte';
27+
export { default as ArrowUp } from './ArrowUp.svelte';

‎src/routes/+page.svelte‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
Plane,
2424
Diamonds,
2525
Clock,
26-
Wave
26+
Wave,
27+
Puff,
28+
ArrowDown,
29+
ArrowUp
2730
} from '../lib';
2831
let color = '#FF3E00';
2932
let size = '60';
@@ -150,6 +153,18 @@
150153
<Clock {size} {color} />
151154
<div class="spinner-title">Clock</div>
152155
</div>
156+
<div class="spinner-item" title="Puff">
157+
<Puff {size} {color} />
158+
<div class="spinner-title">Puff</div>
159+
</div>
160+
<div class="spinner-item" title="ArrowDown">
161+
<ArrowDown {color} />
162+
<div class="spinner-title">ArrowDown</div>
163+
</div>
164+
<div class="spinner-item" title="ArrowUp">
165+
<ArrowUp {color} />
166+
<div class="spinner-title">ArrowUp</div>
167+
</div>
153168
</section>
154169

155170
<style>

0 commit comments

Comments
 (0)