Skip to content

Commit 0b3a4d0

Browse files
raphaelfabeniraphaelfabeni
authored
Merge pull request #35 from airton/master
Added new loader bouncing
2 parents fe38f59 + 0709a4b commit 0b3a4d0

File tree

9 files changed

+100
-3
lines changed

9 files changed

+100
-3
lines changed

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,16 @@ This loader differs from the other because we have to pass an attribute to it, a
369369

370370
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-pokeball) :metal: | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-pokeball.css) :sparkles:
371371

372+
### Bouncing
373+
374+
```html
375+
<div class="loader loader-bouncing is-active"></div>
376+
```
377+
378+
![loader-bouncing](https://user-images.githubusercontent.com/397832/37002847-ca80f236-20a9-11e8-9bd0-246c5c7f980e.gif)
379+
380+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bouncing) :metal:
381+
372382
## Contributing
373383

374384
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-bouncing.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-bouncing.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Loader Bouncing</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="css-loader.css">
17+
</head>
18+
<body>
19+
20+
<!-- Loader -->
21+
<div class="loader loader-bouncing 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+
<script src="http://localhost:35729/livereload.js"></script>
41+
</body>
42+
</html>

‎src/_config.sass

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,7 @@ $loader-mask--color-blue: #3498db !default
6161
$loader-mask--color-green: #2ecc71 !default
6262
$loader-mask--color-yellow: #f1c40f !default
6363
$loader-mask--color-red: #e74c3c !default
64+
65+
// Loader bouncing
66+
// ==========================================================================
67+
$loader-bouncing--color: #fff !default

‎src/css-loader.sass

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@
1414
@import './loaders/loader-clock'
1515
@import './loaders/loader-curtain'
1616
@import './loaders/loader-music'
17-
@import './loaders/loader-pokeball'
17+
@import './loaders/loader-pokeball'
18+
@import './loaders/loader-bouncing'

‎src/loader-bouncing.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-bouncing'

‎src/loaders/_loader-bouncing.sass

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Loader bouncing
2+
// ==========================================================================
3+
4+
.loader-bouncing
5+
6+
&:before,
7+
&:after
8+
content: ''
9+
width: 20px
10+
height: 20px
11+
position: absolute
12+
top: calc(50% - 10px)
13+
left: calc(50% - 10px)
14+
border-radius: 50%
15+
background-color: $loader-bouncing--color
16+
animation: kick 0.6s infinite alternate
17+
18+
&:after
19+
margin-left: -30px
20+
animation: kick 0.6s infinite alternate
21+
22+
&:before
23+
animation-delay: 0.2s
24+
25+
@keyframes kick
26+
from
27+
opacity: 1
28+
transform: translateY(0)
29+
30+
to
31+
opacity: .3
32+
transform: translateY(-1rem)
33+

‎webpack.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ module.exports = {
1818
'loader-smartphone': path.resolve(__dirname, 'src/loader-smartphone.sass'),
1919
'loader-curtain': path.resolve(__dirname, 'src/loader-curtain.sass'),
2020
'loader-music': path.resolve(__dirname, 'src/loader-music.sass'),
21-
'loader-pokeball': path.resolve(__dirname, 'src/loader-pokeball.sass')
21+
'loader-pokeball': path.resolve(__dirname, 'src/loader-pokeball.sass'),
22+
'loader-bouncing': path.resolve(__dirname, 'src/loader-bouncing.sass')
2223
},
2324
output: {
2425
path: path.resolve(__dirname, 'dist'),

0 commit comments

Comments
 (0)