Skip to content

Commit 14f359a

Browse files
EdujugonEdujugon
authored
Merge pull request #7 from PygmySlowLoris/feature/slots
slots
2 parents 874f7eb + 80d70e2 commit 14f359a

File tree

2 files changed

+66
-51
lines changed

2 files changed

+66
-51
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ npm install vue-full-loading --save
2929
| `event-show` | String | <b>Default 'show-full-loading'|
3030
| `event-hide` | String | <b>Default 'hide-full-loading'|
3131

32+
## Slots
33+
34+
Want to add your own loading content/style? No problem, you can use the available slots to do so.
35+
36+
Available slots:
37+
* `loading-container` - This is the container for the loading text/spinner
38+
* `loading-text` - Only for the loading text
39+
* `loading-spinner` - Only for the spinner
3240

3341
## Examples
3442

‎src/Loading.vue‎

Lines changed: 58 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,60 +4,66 @@
44
leave-active-class="animated fadeOut"
55
>
66
<div v-if="showing" :class="{'white-overlay': overlay}">
7-
<div class="loader-wrapper">
8-
<div class="pulled-left" style="padding: 10px 20px" v-html="label"></div>
9-
<div class="wrapper">
10-
<div class="spinner-container">
11-
<div class="spinner-layer spinner-layer--blue">
12-
<div class="spinner-clipper spinner-clipper--left">
13-
<div class="spinner-circle"></div>
14-
</div>
15-
<div class="spinner--patch">
16-
<div class="spinner-circle"></div>
17-
</div>
18-
<div class="spinner-clipper spinner-clipper--right">
19-
<div class="spinner-circle"></div>
20-
</div>
21-
</div>
22-
23-
<div class="spinner-layer spinner-layer--red">
24-
<div class="spinner-clipper spinner-clipper--left">
25-
<div class="spinner-circle"></div>
26-
</div>
27-
<div class="spinner--patch">
28-
<div class="spinner-circle"></div>
29-
</div>
30-
<div class="spinner-clipper spinner-clipper--right">
31-
<div class="spinner-circle"></div>
32-
</div>
33-
</div>
34-
35-
<div class="spinner-layer spinner-layer--yellow">
36-
<div class="spinner-clipper spinner-clipper--left">
37-
<div class="spinner-circle"></div>
38-
</div>
39-
<div class="spinner--patch">
40-
<div class="spinner-circle"></div>
41-
</div>
42-
<div class="spinner-clipper spinner-clipper--right">
43-
<div class="spinner-circle"></div>
44-
</div>
45-
</div>
46-
47-
<div class="spinner-layer spinner-layer--green">
48-
<div class="spinner-clipper spinner-clipper--left">
49-
<div class="spinner-circle"></div>
50-
</div>
51-
<div class="spinner--patch">
52-
<div class="spinner-circle"></div>
53-
</div>
54-
<div class="spinner-clipper spinner-clipper--right">
55-
<div class="spinner-circle"></div>
7+
<slot name="loading-container">
8+
<div class="loader-wrapper">
9+
<slot name="loading-text">
10+
<div class="pulled-left" v-html="label"></div>
11+
</slot>
12+
<slot name="loading-spinner">
13+
<div class="wrapper">
14+
<div class="spinner-container">
15+
<div class="spinner-layer spinner-layer--blue">
16+
<div class="spinner-clipper spinner-clipper--left">
17+
<div class="spinner-circle"></div>
18+
</div>
19+
<div class="spinner--patch">
20+
<div class="spinner-circle"></div>
21+
</div>
22+
<div class="spinner-clipper spinner-clipper--right">
23+
<div class="spinner-circle"></div>
24+
</div>
25+
</div>
26+
27+
<div class="spinner-layer spinner-layer--red">
28+
<div class="spinner-clipper spinner-clipper--left">
29+
<div class="spinner-circle"></div>
30+
</div>
31+
<div class="spinner--patch">
32+
<div class="spinner-circle"></div>
33+
</div>
34+
<div class="spinner-clipper spinner-clipper--right">
35+
<div class="spinner-circle"></div>
36+
</div>
37+
</div>
38+
39+
<div class="spinner-layer spinner-layer--yellow">
40+
<div class="spinner-clipper spinner-clipper--left">
41+
<div class="spinner-circle"></div>
42+
</div>
43+
<div class="spinner--patch">
44+
<div class="spinner-circle"></div>
45+
</div>
46+
<div class="spinner-clipper spinner-clipper--right">
47+
<div class="spinner-circle"></div>
48+
</div>
49+
</div>
50+
51+
<div class="spinner-layer spinner-layer--green">
52+
<div class="spinner-clipper spinner-clipper--left">
53+
<div class="spinner-circle"></div>
54+
</div>
55+
<div class="spinner--patch">
56+
<div class="spinner-circle"></div>
57+
</div>
58+
<div class="spinner-clipper spinner-clipper--right">
59+
<div class="spinner-circle"></div>
60+
</div>
61+
</div>
5662
</div>
5763
</div>
58-
</div>
64+
</slot>
5965
</div>
60-
</div>
66+
</slot>
6167
</div>
6268
</transition>
6369
</template>
@@ -138,6 +144,7 @@
138144
139145
.pulled-left {
140146
float: left;
147+
padding: 10px 20px
141148
}
142149
143150
*, *:before, *:after {

0 commit comments

Comments
 (0)