Skip to content

Commit 3cb623d

Browse files
raphaelfabeniraphaelfabeni
committed
Add the loader curtain <o/
1 parent 1b5d2e7 commit 3cb623d

File tree

10 files changed

+152
-55
lines changed

10 files changed

+152
-55
lines changed

‎README.md

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ It's usually common to show a loader to users when they must wait for something
2222
* [ball](#ball)
2323
* [smartphone](#smartphone)
2424
* [clock](#clock)
25+
* [curtain](#curtain)
2526
* [Contributing](#contributing)
2627
* [Browser Support](#browser-support)
2728

@@ -181,7 +182,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
181182

182183
#### Variations
183184

184-
*shadow*: a version of the ball with inset shadow.
185+
**shadow**: a version of the ball with inset shadow.
185186

186187
![loader-ball-shadow](https://cloud.githubusercontent.com/assets/1345662/19502619/06f1c906-958d-11e6-87c9-d64b13688485.gif)
187188

@@ -199,7 +200,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
199200

200201
#### Variations
201202

202-
*w/ screen text*: it's possible to pass an attribute to the loader and show a simple text inside the screen. Like the other one, if we only pass the attribute, a default _loading_ text is shown; but you can pass a custom text. Just remember that it can't be a big word (our smartphone screen is small).
203+
**w/ screen text**: it's possible to pass an attribute to the loader and show a simple text inside the screen. Like the other one, if we only pass the attribute, a default _loading_ text is shown; but you can pass a custom text. Just remember that it can't be a big word (our smartphone screen is small).
203204

204205
```html
205206
<!-- default loading text -->
@@ -223,6 +224,46 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
223224

224225
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-clock) :metal:
225226

227+
### Curtain
228+
229+
```html
230+
<div class="loader loader-curtain is-active"></div>
231+
```
232+
233+
![loader-curtain-default](https://cloud.githubusercontent.com/assets/1345662/20083193/fd7043fc-a541-11e6-8f86-e08cbb2c02c2.gif)
234+
235+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain) :metal:
236+
237+
#### Variations
238+
239+
**brazilian**: a simple version using the traditional brazilian green and yellow. :brazil:
240+
241+
```html
242+
<div class="loader loader-curtain is-active" brazilian></div>
243+
```
244+
245+
![loader-curtain-br](https://cloud.githubusercontent.com/assets/1345662/20083191/fd5596c4-a541-11e6-8f26-1a9325e0401e.gif)
246+
247+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain-brazilian) :metal:
248+
249+
**colorful**: a colorful version.
250+
251+
```html
252+
<div class="loader loader-curtain is-active" colorful></div>
253+
```
254+
255+
![loader-curtain-color](https://cloud.githubusercontent.com/assets/1345662/20083192/fd59f854-a541-11e6-97eb-6bd380ff5356.gif)
256+
257+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain-colorful) :metal:
258+
259+
**w/ custom text**: it's also possible customize the text loader. It's just pass the data attribute `curtain-text` with the value desired.
260+
261+
```html
262+
<div class="loader loader-curtain is-active" colorful curtain-text="Hello"></div>
263+
```
264+
265+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain-custom-text) :metal:
266+
226267
## Contributing
227268

228269
1. Clone this repository.

‎dist/css-loader.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/loader-curtain.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/index-loading.html renamed to ‎examples/loader-curtain.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Loader</title>
5+
<title>Loader curtain</title>
66

77
<style>
88
.container {
@@ -18,7 +18,7 @@
1818
<body>
1919

2020
<!-- Loader -->
21-
<div class="loader loader-text is-active"></div>
21+
<div class="loader loader-curtain is-active" colorful></div>
2222

2323
<!-- Fake content -->
2424
<div class="container">

‎gulpfile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ var cssFiles = [
1212
'src/loader-border.sass',
1313
'src/loader-ball.sass',
1414
'src/loader-clock.sass',
15-
'src/loader-smartphone.sass'
15+
'src/loader-smartphone.sass',
16+
'src/loader-curtain.sass'
1617
];
1718

1819
gulp.task('serve', ['lint', 'sass'], function() {

‎src/_config.sass

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,15 @@ $loader-smartphone--text-color: #fff
4444
// ==========================================================================
4545
$loader-clock--color: #2ecc71
4646
$loader-clock--color-bg: #f5f5f5
47-
$loader-clock--color-border: #555
47+
$loader-clock--color-border: #555
48+
49+
// Loader curtain
50+
// ==========================================================================
51+
$loader-mask--size: 70px
52+
$loader-mask--color: #666
53+
$loader-mask--color-mask: #fff
54+
55+
$loader-mask--color-blue: #3498db
56+
$loader-mask--color-green: #2ecc71
57+
$loader-mask--color-yellow: #f1c40f
58+
$loader-mask--color-red: #e74c3c

‎src/css-loader.sass

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
@import './loaders/loader-border'
1111
@import './loaders/loader-ball'
1212
@import './loaders/loader-smartphone'
13-
@import './loaders/loader-clock'
13+
@import './loaders/loader-clock'
14+
@import './loaders/loader-curtain'

‎src/loader-curtain.sass

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import './config'
2+
3+
@import './general/base'
4+
5+
@import './loaders/loader-curtain'

‎src/loaders/_loader-curtain.sass

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// Loader curtain
2+
// ==========================================================================
3+
4+
.loader-curtain
5+
6+
&:before,
7+
&:after
8+
position: fixed
9+
width: 100%
10+
top: 50%
11+
margin-top: - $loader-mask--size / 2
12+
font-size: $loader-mask--size
13+
text-align: center
14+
font-family: $font-loader
15+
overflow: hidden
16+
line-height: 1.2
17+
content: 'Loading'
18+
19+
&:before
20+
color: $loader-mask--color
21+
22+
&:after
23+
color: $loader-mask--color-mask
24+
height: 0
25+
animation: curtain 1s linear infinite alternate both
26+
27+
&[curtain-text]:not([curtain-text = ''])
28+
&:before,
29+
&:after
30+
content: attr(curtain-text)
31+
32+
// Brazilian version
33+
.loader-curtain[brazilian]
34+
35+
&:before
36+
color: $loader-mask--color-yellow
37+
38+
&:after
39+
color: $loader-mask--color-green
40+
41+
// Coloful version
42+
.loader-curtain[colorful]
43+
44+
&:before
45+
animation: maskColorful 2s linear infinite alternate both
46+
47+
&:after
48+
animation: curtain 1s linear infinite alternate both, maskColorful-front 2s 1s linear infinite alternate both
49+
color: #000
50+
51+
// Colorful animation
52+
@keyframes maskColorful
53+
0%
54+
color: $loader-mask--color-blue
55+
56+
49.5%
57+
color: $loader-mask--color-blue
58+
59+
50.5%
60+
color: $loader-mask--color-red
61+
62+
100%
63+
color: $loader-mask--color-red
64+
65+
@keyframes maskColorful-front
66+
0%
67+
color: $loader-mask--color-green
68+
69+
49.5%
70+
color: $loader-mask--color-green
71+
72+
50.5%
73+
color: $loader-mask--color-yellow
74+
75+
100%
76+
color: $loader-mask--color-yellow
77+
78+
// Curtain animation
79+
@keyframes curtain
80+
0%
81+
height: 0
82+
83+
100%
84+
height: $loader-mask--size * 1.2

0 commit comments

Comments
 (0)