Skip to content

Commit 74102a8

Browse files
traviscibottraviscibot
committed
Deploy jh3y/whirl to github.com/jh3y/whirl.git:v2.0.1
0 parents  commit 74102a8

File tree

195 files changed

+10057
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

195 files changed

+10057
-0
lines changed

‎README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
[![Build Status](https://travis-ci.org/jh3y/whirl.svg?branch=master)](https://travis-ci.org/jh3y/whirl)
2+
[![Netlify Status](https://api.netlify.com/api/v1/badges/d3e57ac0-62c4-4f24-85a8-70b6468c0245/deploy-status)](https://app.netlify.com/sites/whirl/deploys)
3+
<!-- DROP SOME TRAVIS AND NETLIFY GOODIES HERE -->
4+
# Whirl
5+
## CSS loading animations with minimal effort!
6+
7+
[![Whirl](https://raw.github.com/jh3y/pics/master/whirl/whirl.gif)](https://raw.github.com/jh3y/pics/master/whirl/whirl.gif)
8+
9+
`whirl` is a curation of CSS loading animations(whirls! 😅). It started as a drop in `CSS` file to get easy animations using `:pseudo` elements. It's now a collection of loading animations to use, take inspiration from, change and do what you want with 👍
10+
11+
### No CSS distro?
12+
It's inefficient. It's likely an app will only use one or two loaders. Pulling them all into an app would be overkill. Most projects use some form of bundling making it possible to import a single loader's styles.
13+
14+
### Usage
15+
You've got different options here.
16+
17+
You can install `whirl` and import the styles you want. You get both CSS and SASS files 👍
18+
```shell
19+
npm i @jh3y/whirl
20+
yarn add @jh3y/whirl
21+
```
22+
23+
Alternatively, you can grab the [CSS or SASS](https://github.com/jh3y/whirl/tags) and change to your needs. There's a dynamic link in the demo. Or visit the latest versions tag branch 👍
24+
25+
⚠️ Be aware that if you're bundling, you'll likely have to override some styles. Be careful with conflicting classnames or animation names.
26+
27+
### Contributing
28+
See [`CONTRIBUTING`](https://github.com/jh3y/whirl/blob/master/.github/CONTRIBUTING.md).
29+
30+
---
31+
32+
@jh3y 🐻 2019
33+

‎css/arc.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Arc
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
.arc:before {
7+
-webkit-animation: spin 0.5s infinite linear;
8+
animation: spin 0.5s infinite linear;
9+
border-radius: 100%;
10+
border-top: 6px solid var(--primary, #fff);
11+
content: '';
12+
display: block;
13+
height: 50px;
14+
width: 50px; }
15+
16+
@-webkit-keyframes spin {
17+
to {
18+
-webkit-transform: rotate(360deg);
19+
transform: rotate(360deg); } }
20+
21+
@keyframes spin {
22+
to {
23+
-webkit-transform: rotate(360deg);
24+
transform: rotate(360deg); } }

‎css/bar-spin.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Bar spin
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
.bar-spin {
7+
-webkit-animation: spin 3s infinite linear;
8+
animation: spin 3s infinite linear;
9+
height: 50px;
10+
position: relative;
11+
width: 50px; }
12+
.bar-spin:before {
13+
content: '';
14+
display: block;
15+
height: 50px;
16+
width: 10px;
17+
-webkit-animation: spin .5s infinite;
18+
animation: spin .5s infinite;
19+
background: var(--primary, #fff);
20+
position: absolute;
21+
left: 50%;
22+
margin-left: -5px; }
23+
24+
@-webkit-keyframes spin {
25+
to {
26+
-webkit-transform: rotate(360deg);
27+
transform: rotate(360deg); } }
28+
29+
@keyframes spin {
30+
to {
31+
-webkit-transform: rotate(360deg);
32+
transform: rotate(360deg); } }

‎css/basic.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* Basic
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
.basic:before {
7+
content: '';
8+
display: block;
9+
height: 50px;
10+
width: 50px;
11+
-webkit-animation: spin .5s infinite linear;
12+
animation: spin .5s infinite linear;
13+
border: 6px var(--primary) solid;
14+
border-left-color: var(--secondary);
15+
border-radius: 100%; }
16+
17+
@-webkit-keyframes spin {
18+
to {
19+
-webkit-transform: rotate(360deg);
20+
transform: rotate(360deg); } }
21+
22+
@keyframes spin {
23+
to {
24+
-webkit-transform: rotate(360deg);
25+
transform: rotate(360deg); } }

‎css/blades.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Blades
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*
6+
*/
7+
.blades {
8+
-webkit-animation: spin 1s infinite linear;
9+
animation: spin 1s infinite linear;
10+
height: 20px;
11+
width: 20px; }
12+
.blades div {
13+
border: 4px solid transparent;
14+
border-left-color: var(--primary);
15+
height: 20px;
16+
left: 50%;
17+
position: absolute;
18+
top: 50%;
19+
-webkit-transform-origin: top left;
20+
transform-origin: top left;
21+
width: 20px; }
22+
.blades div:nth-child(1) {
23+
-webkit-transform: rotate(72deg) translateY(5px);
24+
transform: rotate(72deg) translateY(5px); }
25+
.blades div:nth-child(2) {
26+
-webkit-transform: rotate(144deg) translateY(5px);
27+
transform: rotate(144deg) translateY(5px); }
28+
.blades div:nth-child(3) {
29+
-webkit-transform: rotate(216deg) translateY(5px);
30+
transform: rotate(216deg) translateY(5px); }
31+
.blades div:nth-child(4) {
32+
-webkit-transform: rotate(288deg) translateY(5px);
33+
transform: rotate(288deg) translateY(5px); }
34+
.blades div:nth-child(5) {
35+
-webkit-transform: rotate(360deg) translateY(5px);
36+
transform: rotate(360deg) translateY(5px); }
37+
38+
@-webkit-keyframes spin {
39+
to {
40+
-webkit-transform: rotate(360deg);
41+
transform: rotate(360deg); } }
42+
43+
@keyframes spin {
44+
to {
45+
-webkit-transform: rotate(360deg);
46+
transform: rotate(360deg); } }

‎css/bloom.css

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Bloom
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
.bloom {
7+
height: 30px;
8+
position: relative;
9+
width: 30px; }
10+
.bloom:before, .bloom:after {
11+
border-radius: 100%;
12+
content: '';
13+
display: block;
14+
height: 30px;
15+
width: 30px; }
16+
.bloom:before {
17+
background-color: var(--primary);
18+
-webkit-animation: scale-up 1s infinite ease;
19+
animation: scale-up 1s infinite ease; }
20+
.bloom:after {
21+
-webkit-animation: scale 1s infinite;
22+
animation: scale 1s infinite;
23+
border: 4px solid var(--primary);
24+
left: 0;
25+
position: absolute;
26+
top: 0; }
27+
28+
@-webkit-keyframes scale-up {
29+
0% {
30+
-webkit-transform: scale(0);
31+
transform: scale(0); }
32+
50% {
33+
-webkit-transform: scale(1);
34+
transform: scale(1); } }
35+
36+
@keyframes scale-up {
37+
0% {
38+
-webkit-transform: scale(0);
39+
transform: scale(0); }
40+
50% {
41+
-webkit-transform: scale(1);
42+
transform: scale(1); } }
43+
44+
@-webkit-keyframes scale {
45+
0%, 50% {
46+
opacity: 0; }
47+
55% {
48+
opacity: 1; }
49+
100% {
50+
opacity: 0;
51+
-webkit-transform: scale(2);
52+
transform: scale(2); } }
53+
54+
@keyframes scale {
55+
0%, 50% {
56+
opacity: 0; }
57+
55% {
58+
opacity: 1; }
59+
100% {
60+
opacity: 0;
61+
-webkit-transform: scale(2);
62+
transform: scale(2); } }

‎css/book.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Book
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
@-webkit-keyframes whirl-book {
7+
0% {
8+
-webkit-transform: rotateY(0deg);
9+
transform: rotateY(0deg); }
10+
50%,
11+
80% {
12+
-webkit-transform: rotateY(-180deg);
13+
transform: rotateY(-180deg); }
14+
90%,
15+
100% {
16+
opacity: 0;
17+
-webkit-transform: rotateY(-180deg);
18+
transform: rotateY(-180deg); } }
19+
@keyframes whirl-book {
20+
0% {
21+
-webkit-transform: rotateY(0deg);
22+
transform: rotateY(0deg); }
23+
50%,
24+
80% {
25+
-webkit-transform: rotateY(-180deg);
26+
transform: rotateY(-180deg); }
27+
90%,
28+
100% {
29+
opacity: 0;
30+
-webkit-transform: rotateY(-180deg);
31+
transform: rotateY(-180deg); } }
32+
33+
.book {
34+
height: 30px;
35+
position: relative;
36+
width: 30px;
37+
-webkit-perspective: 60px;
38+
perspective: 60px; }
39+
.book div {
40+
-webkit-animation: whirl-book 2s infinite;
41+
animation: whirl-book 2s infinite;
42+
background: var(--primary);
43+
height: 100%;
44+
position: absolute;
45+
left: 50%;
46+
-webkit-transform-origin: left;
47+
transform-origin: left;
48+
width: 100%; }
49+
.book div:nth-child(1) {
50+
-webkit-animation-delay: 0.15s;
51+
animation-delay: 0.15s; }
52+
.book div:nth-child(2) {
53+
-webkit-animation-delay: 0.3s;
54+
animation-delay: 0.3s; }
55+
.book div:nth-child(3) {
56+
-webkit-animation-delay: 0.45s;
57+
animation-delay: 0.45s; }
58+
.book div:nth-child(4) {
59+
-webkit-animation-delay: 0.6s;
60+
animation-delay: 0.6s; }
61+
.book div:nth-child(5) {
62+
-webkit-animation-delay: 0.75s;
63+
animation-delay: 0.75s; }

‎css/borders.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Borders
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
.borders {
7+
-webkit-box-align: center;
8+
-ms-flex-align: center;
9+
align-items: center;
10+
height: 50px;
11+
display: -webkit-box;
12+
display: -ms-flexbox;
13+
display: flex;
14+
-webkit-box-pack: center;
15+
-ms-flex-pack: center;
16+
justify-content: center;
17+
position: relative;
18+
width: 50px; }
19+
.borders:after, .borders:before {
20+
border: 6px solid var(--primary);
21+
border-radius: 100%;
22+
position: absolute;
23+
content: '';
24+
display: block; }
25+
.borders:before {
26+
border-bottom-color: transparent;
27+
border-left-color: transparent;
28+
animation: spin .75s infinite linear reverse;
29+
height: 30px;
30+
width: 30px; }
31+
.borders:after {
32+
-webkit-animation: spin .5s infinite linear;
33+
animation: spin .5s infinite linear;
34+
height: 50px;
35+
width: 50px;
36+
border-right-color: transparent;
37+
border-top-color: transparent; }
38+
39+
@-webkit-keyframes spin {
40+
to {
41+
-webkit-transform: rotate(360deg);
42+
transform: rotate(360deg); } }
43+
44+
@keyframes spin {
45+
to {
46+
-webkit-transform: rotate(360deg);
47+
transform: rotate(360deg); } }

‎css/bounce.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Bounce
3+
*
4+
* @author jh3y - jheytompkins.com
5+
*/
6+
@-webkit-keyframes whirl-bounce {
7+
0% {
8+
-webkit-transform: translate(0, -150%) scaleX(1) scaleY(1);
9+
transform: translate(0, -150%) scaleX(1) scaleY(1); }
10+
100% {
11+
-webkit-transform: translate(0, 150%) scaleX(1.1) scaleY(0.9);
12+
transform: translate(0, 150%) scaleX(1.1) scaleY(0.9); } }
13+
@keyframes whirl-bounce {
14+
0% {
15+
-webkit-transform: translate(0, -150%) scaleX(1) scaleY(1);
16+
transform: translate(0, -150%) scaleX(1) scaleY(1); }
17+
100% {
18+
-webkit-transform: translate(0, 150%) scaleX(1.1) scaleY(0.9);
19+
transform: translate(0, 150%) scaleX(1.1) scaleY(0.9); } }
20+
21+
.bounce:before {
22+
-webkit-animation: whirl-bounce 0.5s cubic-bezier(0.6, 0.3, 0.8, 0.5) alternate infinite;
23+
animation: whirl-bounce 0.5s cubic-bezier(0.6, 0.3, 0.8, 0.5) alternate infinite;
24+
background: var(--primary);
25+
border-radius: 100%;
26+
content: '';
27+
display: block;
28+
height: 20px;
29+
width: 20px;
30+
-webkit-transform-origin: bottom center;
31+
transform-origin: bottom center; }

0 commit comments

Comments
 (0)