Skip to content

Commit 7b41a16

Browse files
raphaelfabeniraphaelfabeni
authored
Merge pull request #22 from raphaelfabeni/development
Development
2 parents fe526b9 + b28b864 commit 7b41a16

File tree

6 files changed

+113
-1
lines changed

6 files changed

+113
-1
lines changed

‎README.md

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

318318
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-music-rock-you) :metal:
319319

320+
### Pokeball
321+
322+
```html
323+
<div class="loader loader-pokeball is-active"></div>
324+
```
325+
326+
![loader-pokeball](https://cloud.githubusercontent.com/assets/1345662/22757019/6208046c-ee30-11e6-87c9-5c69f89201c3.gif)
327+
328+
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-pokeball) :metal:
329+
320330
## Contributing
321331

322332
1. Clone this repository.

‎dist/loader-pokeball.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-pokeball.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 Pokeball</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-pokeball 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>

‎gulpfile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ var cssFiles = [
1414
'src/loader-clock.sass',
1515
'src/loader-smartphone.sass',
1616
'src/loader-curtain.sass',
17-
'src/loader-music.sass'
17+
'src/loader-music.sass',
18+
'src/loader-pokeball.sass'
1819
];
1920

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

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

‎src/loaders/_loader-pokeball.sass

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Loader pokeball
2+
// ==========================================================================
3+
.loader-pokeball
4+
5+
&:before
6+
content: ''
7+
position: absolute
8+
width: 100px
9+
height: 100px
10+
top: 50%
11+
left: 50%
12+
margin: -50px 0 0 -50px
13+
background: linear-gradient(to bottom, #f00 42%, #000 42%, #000 58%, #fff 58%)
14+
background-repeat: no-repeat
15+
background-color: #fff
16+
border-radius: 50%
17+
z-index: 1
18+
animation: movePokeball 1s linear infinite both
19+
20+
&:after
21+
content: ''
22+
position: absolute
23+
width: 24px
24+
height: 24px
25+
top: 50%
26+
left: 50%
27+
margin: -12px 0 0 -12px
28+
background-color: #fff
29+
border-radius: 50%
30+
z-index: 2
31+
animation: movePokeball 1s linear infinite both, flashPokeball .5s infinite alternate
32+
border: solid 2px #000
33+
box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000
34+
35+
@keyframes movePokeball
36+
0%
37+
transform: translateX(0) rotate(0)
38+
39+
15%
40+
transform: translatex(-10px) rotate(-5deg)
41+
42+
30%
43+
transform: translateX(10px) rotate(5deg)
44+
45+
45%
46+
transform: translatex(0) rotate(0)
47+
48+
49+
@keyframes flashPokeball
50+
0%
51+
background-color: #fff
52+
53+
100%
54+
background-color: #fd0

0 commit comments

Comments
 (0)