Skip to content

Commit dc29835

Browse files
raphaelfabeniraphaelfabeni
authored
Merge pull request #14 from raphaelfabeni/development
Development
2 parents 53181db + 3cb623d commit dc29835

File tree

9 files changed

+191
-6
lines changed

9 files changed

+191
-6
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/loader-curtain.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Loader curtain</title>
6+
7+
<style>
8+
.container {
9+
max-width: 800px;
10+
width: 100%;
11+
margin: 0 auto;
12+
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
13+
}
14+
</style>
15+
16+
<link rel="stylesheet" href="../dist/css-loader.css">
17+
</head>
18+
<body>
19+
20+
<!-- Loader -->
21+
<div class="loader loader-curtain is-active" colorful></div>
22+
23+
<!-- Fake content -->
24+
<div class="container">
25+
<h1>Lorem ipsum dolor sit amet.</h1>
26+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!</p>
27+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!</p>
28+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!</p>
29+
<ul>
30+
<li>Lorem ipsum dolor sit.</li>
31+
<li>Lorem ipsum dolor sit.</li>
32+
<li>Lorem ipsum dolor sit.</li>
33+
<li>Lorem ipsum dolor sit.</li>
34+
</ul>
35+
<h2>Lorem ipsum dolor sit amet.</h2>
36+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
37+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
38+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
39+
</div>
40+
</body>
41+
</html>

‎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'

0 commit comments

Comments
 (0)