Skip to content

Commit da72b55

Browse files
raphaelfabeniraphaelfabeni
authored
Merge pull request #8 from raphaelfabeni/development
Development
2 parents deb3b0a + d3c4de9 commit da72b55

File tree

6 files changed

+113
-3
lines changed

6 files changed

+113
-3
lines changed

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,22 @@
1010

1111
Usually it's common to show a loader to the users when they must wait something in a web application (an _ajax_ request or a form submit, etc). _Gif_image loaders was great but using CSS we can avoid the image request, also it's easier for customise and maintain and it's more cool.
1212

13+
## toc
14+
15+
* [Install](#install)
16+
* [Setup](#setup)
17+
* [Examples](#examples)
18+
* [default](#default)
19+
* [double](#double)
20+
* [double](#double)
21+
* [bar](#bar)
22+
* [border](#border)
23+
* [ball](#ball)
24+
* [smartphone](#smartphone)
25+
* [clock](#clock)
26+
* [Contributing](#contributing)
27+
* [Browser Support](#browser-support)
28+
1329
## Install
1430

1531
```bash
@@ -198,6 +214,16 @@ Like the `loader` example, it's also possible pass the `data-text` and `blink` a
198214

199215
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-smartphone-text) :metal:
200216

217+
### Clock
218+
219+
```html
220+
<div class="loader loader-clock is-active"></div>
221+
```
222+
223+
![loader-clock](https://cloud.githubusercontent.com/assets/1345662/19628192/f09d9a88-9936-11e6-8a2c-de22df0f820b.gif)
224+
225+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-clock) :metal:
226+
201227
## Contributing
202228

203229
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.

‎examples/loader-clock.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 Clock</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-clock is-active"></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>

‎src/_config.sass‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,10 @@ $loader-ball--shadow: rgba(0,0,0,.5)
3838
// Loader smartphone
3939
// ==========================================================================
4040
$loader-smartphone--color: gold
41-
$loader-smartphone--text-color: #fff
41+
$loader-smartphone--text-color: #fff
42+
43+
// Loader clock
44+
// ==========================================================================
45+
$loader-clock--color: #2ecc71
46+
$loader-clock--color-bg: #f5f5f5
47+
$loader-clock--color-border: #555

‎src/css-loader.sass‎

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

‎src/loaders/_loader-clock.sass‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Loader clock
2+
// ==========================================================================
3+
4+
.loader-clock
5+
6+
&:before
7+
content: ''
8+
position: fixed
9+
width: 120px
10+
height: 120px
11+
left: 50%
12+
top: 50%
13+
border-radius: 50%
14+
overflow: hidden
15+
margin: -60px 0 0 -60px
16+
background: linear-gradient(to bottom, transparent 50%, $loader-clock--color-bg 50%),
17+
linear-gradient(90deg, transparent 55px, $loader-clock--color 55px, $loader-clock--color 65px, transparent 65px),
18+
linear-gradient(to bottom, $loader-clock--color-bg 50%, $loader-clock--color-bg 50%)
19+
box-shadow: 0 0 0 10px $loader-clock--color-bg inset, 0 0 0 5px $loader-clock--color-border, 0 0 0 10px lighten($loader-clock--color-border, 15%)
20+
animation: rotation infinite 2s linear
21+
22+
&:after
23+
content: ''
24+
position: fixed
25+
width: 60px
26+
height: 40px
27+
left: 50%
28+
top: 50%
29+
margin: -20px 0 0 -15px
30+
border-radius: 20px 0 0 20px
31+
overflow: hidden
32+
background: radial-gradient(circle at 14px 20px, darken($loader-clock--color, 10%) 10px, transparent 10px),
33+
radial-gradient(circle at 14px 20px, darken($loader-clock--color, 20%) 14px, transparent 14px),
34+
linear-gradient(180deg, transparent 15px, $loader-clock--color 15px, $loader-clock--color 25px, transparent 25px)
35+
animation: rotation infinite 24s linear
36+
transform-origin: 15px center

0 commit comments

Comments
 (0)