@fishawack/lab-velocity 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/_loader.scss +44 -0
- package/index.js +2 -1
- package/layout/Loader.vue +39 -0
- package/package.json +1 -1
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
.vel-loader {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: block;
|
|
4
|
+
width: 6rem;
|
|
5
|
+
height: 6rem;
|
|
6
|
+
border-radius: 50%;
|
|
7
|
+
background-color: inherit;
|
|
8
|
+
|
|
9
|
+
svg {
|
|
10
|
+
.circle {
|
|
11
|
+
animation: 2s spinning cubic-bezier(0.41, 0.26, 0.2, 0.62) infinite;
|
|
12
|
+
transform-origin: center;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.vel-loader--l {
|
|
18
|
+
width: 10rem;
|
|
19
|
+
height: 10rem;
|
|
20
|
+
|
|
21
|
+
&::before {
|
|
22
|
+
border-width: 0.6rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@include breakpoint (max-width $mobileMax) {
|
|
26
|
+
width: 6rem;
|
|
27
|
+
height: 6rem;
|
|
28
|
+
|
|
29
|
+
&::before {
|
|
30
|
+
border-width: 0.4rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
@keyframes spinning {
|
|
37
|
+
from {
|
|
38
|
+
transform: rotate(0);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
to {
|
|
42
|
+
transform: rotate(2turn);
|
|
43
|
+
}
|
|
44
|
+
}
|
package/index.js
CHANGED
|
@@ -24,4 +24,5 @@ export { default as Breadcrumbs } from "./navigation/Breadcrumbs.vue";
|
|
|
24
24
|
export { default as BreadcrumbsItem } from "./navigation/BreadcrumbsItem.vue";
|
|
25
25
|
|
|
26
26
|
export { default as Icon } from "./Icon.vue";
|
|
27
|
-
export { default as Svg } from "./Svg.vue";
|
|
27
|
+
export { default as Svg } from "./Svg.vue";
|
|
28
|
+
export { default as Loader } from "./layout/Loader.vue";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="vel-loader">
|
|
3
|
+
<slot>
|
|
4
|
+
<svg viewBox="0 0 84 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
5
|
+
<defs>
|
|
6
|
+
<pattern id="e11rz3cojb" width="100%" height="100%" patternUnits="objectBoundingBox">
|
|
7
|
+
<use xlink:href="#w1y9w0pc6a"/>
|
|
8
|
+
</pattern>
|
|
9
|
+
<image id="w1y9w0pc6a" width="84" height="84" xlink:href="data:image/png;base64,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"/>
|
|
10
|
+
<path id="3vizvfpwxc" d="M0 0h39.967v39.966H0z"/>
|
|
11
|
+
</defs>
|
|
12
|
+
<g fill="none" fill-rule="evenodd">
|
|
13
|
+
<path class="circle" d="M42 0C18.804 0 0 18.804 0 42s18.804 42 42 42 42-18.804 42-42S65.196 0 42 0zm0 4c20.987 0 38 17.013 38 38S62.987 80 42 80 4 62.987 4 42 21.013 4 42 4z" fill="url(#e11rz3cojb)" fill-rule="nonzero"/>
|
|
14
|
+
<g transform="translate(22 22)">
|
|
15
|
+
<mask id="y3cby6hymd" fill="#fff">
|
|
16
|
+
<use xlink:href="#3vizvfpwxc"/>
|
|
17
|
+
</mask>
|
|
18
|
+
<path d="m16.552 21.54 4.036-12.407h.312l4.204 12.946c2.503 1.604 4.81 3.465 6.752 5.604l-.38.486c-3.45-2.688-8.243-5.126-14.924-6.63m23.414 18.425L26.189 0h-10.89L8.295 20.29a82.37 82.37 0 0 0-6.892-.306L0 24.047c2.37.103 4.628.329 6.769.664L1.502 39.966h9.055l4.314-13.26c7.747 2.716 13.03 7.333 15.105 13.26h9.99v-.002" fill="#0D0D0D" mask="url(#y3cby6hymd)"/>
|
|
19
|
+
</g>
|
|
20
|
+
</g>
|
|
21
|
+
</svg>
|
|
22
|
+
|
|
23
|
+
</slot>
|
|
24
|
+
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script>
|
|
29
|
+
export default {
|
|
30
|
+
props: {
|
|
31
|
+
reversed: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: false,
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
components: {
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
</script>
|