Skip to content

Commit d273984

Browse files
Vangelis TzortzisJohn W. Long
Vangelis Tzortzis
authored and
John W. Long
committed
Add innerball loader complements of @srekoble 
1 parent 456932f commit d273984

File tree

6 files changed

+256
-0
lines changed

6 files changed

+256
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ The full list of loading indicator class names are shown below. To see them in a
6060
| .plus-loader | Animated Google Plus-like loader. |
6161
| .ball-loader | A bouncing ball. |
6262
| .hexdots-loader | Similar to the dots animation, but with six! |
63+
| .inner-circles-loader | A filling circle with other circles |
6364

6465

6566
Customize with Sass

‎css/spinner/inner-circles.css

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/* :not(:required) hides this rule from IE9 and below */
2+
.inner-circles-loader:not(:required) {
3+
-moz-transform: translate3d(0, 0, 0);
4+
-ms-transform: translate3d(0, 0, 0);
5+
-webkit-transform: translate3d(0, 0, 0);
6+
transform: translate3d(0, 0, 0);
7+
position: relative;
8+
display: inline-block;
9+
width: 50px;
10+
height: 50px;
11+
background: rgba(25, 165, 152, 0.5);
12+
border-radius: 50%;
13+
overflow: hidden;
14+
text-indent: -9999px;
15+
/* Hides inner circles outside base circle at safari */
16+
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
17+
}
18+
.inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after {
19+
content: '';
20+
position: absolute;
21+
top: 0;
22+
display: inline-block;
23+
width: 50px;
24+
height: 50px;
25+
border-radius: 50%;
26+
}
27+
.inner-circles-loader:not(:required):before {
28+
-moz-animation: inner-circles-loader 3s infinite;
29+
-webkit-animation: inner-circles-loader 3s infinite;
30+
animation: inner-circles-loader 3s infinite;
31+
-moz-transform-origin: 0 50%;
32+
-ms-transform-origin: 0 50%;
33+
-webkit-transform-origin: 0 50%;
34+
transform-origin: 0 50%;
35+
left: 0;
36+
background: #c7efcf;
37+
}
38+
.inner-circles-loader:not(:required):after {
39+
-moz-animation: inner-circles-loader 3s 0.2s reverse infinite;
40+
-webkit-animation: inner-circles-loader 3s 0.2s reverse infinite;
41+
animation: inner-circles-loader 3s 0.2s reverse infinite;
42+
-moz-transform-origin: 100% 50%;
43+
-ms-transform-origin: 100% 50%;
44+
-webkit-transform-origin: 100% 50%;
45+
transform-origin: 100% 50%;
46+
right: 0;
47+
background: #eef5db;
48+
}
49+
50+
@-moz-keyframes inner-circles-loader {
51+
0% {
52+
-moz-transform: rotate(0deg);
53+
transform: rotate(0deg);
54+
}
55+
50% {
56+
-moz-transform: rotate(360deg);
57+
transform: rotate(360deg);
58+
}
59+
100% {
60+
-moz-transform: rotate(0deg);
61+
transform: rotate(0deg);
62+
}
63+
}
64+
@-webkit-keyframes inner-circles-loader {
65+
0% {
66+
-webkit-transform: rotate(0deg);
67+
transform: rotate(0deg);
68+
}
69+
50% {
70+
-webkit-transform: rotate(360deg);
71+
transform: rotate(360deg);
72+
}
73+
100% {
74+
-webkit-transform: rotate(0deg);
75+
transform: rotate(0deg);
76+
}
77+
}
78+
@keyframes inner-circles-loader {
79+
0% {
80+
-moz-transform: rotate(0deg);
81+
-ms-transform: rotate(0deg);
82+
-webkit-transform: rotate(0deg);
83+
transform: rotate(0deg);
84+
}
85+
50% {
86+
-moz-transform: rotate(360deg);
87+
-ms-transform: rotate(360deg);
88+
-webkit-transform: rotate(360deg);
89+
transform: rotate(360deg);
90+
}
91+
100% {
92+
-moz-transform: rotate(0deg);
93+
-ms-transform: rotate(0deg);
94+
-webkit-transform: rotate(0deg);
95+
transform: rotate(0deg);
96+
}
97+
}

‎css/spinners.css

+98
Original file line numberDiff line numberDiff line change
@@ -2947,3 +2947,101 @@
29472947
-webkit-transform-origin: 50% 50%;
29482948
transform-origin: 50% 50%;
29492949
}
2950+
2951+
/* :not(:required) hides this rule from IE9 and below */
2952+
.inner-circles-loader:not(:required) {
2953+
-moz-transform: translate3d(0, 0, 0);
2954+
-ms-transform: translate3d(0, 0, 0);
2955+
-webkit-transform: translate3d(0, 0, 0);
2956+
transform: translate3d(0, 0, 0);
2957+
position: relative;
2958+
display: inline-block;
2959+
width: 50px;
2960+
height: 50px;
2961+
background: rgba(25, 165, 152, 0.5);
2962+
border-radius: 50%;
2963+
overflow: hidden;
2964+
text-indent: -9999px;
2965+
/* Hides inner circles outside base circle at safari */
2966+
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
2967+
}
2968+
.inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after {
2969+
content: '';
2970+
position: absolute;
2971+
top: 0;
2972+
display: inline-block;
2973+
width: 50px;
2974+
height: 50px;
2975+
border-radius: 50%;
2976+
}
2977+
.inner-circles-loader:not(:required):before {
2978+
-moz-animation: inner-circles-loader 3s infinite;
2979+
-webkit-animation: inner-circles-loader 3s infinite;
2980+
animation: inner-circles-loader 3s infinite;
2981+
-moz-transform-origin: 0 50%;
2982+
-ms-transform-origin: 0 50%;
2983+
-webkit-transform-origin: 0 50%;
2984+
transform-origin: 0 50%;
2985+
left: 0;
2986+
background: #c7efcf;
2987+
}
2988+
.inner-circles-loader:not(:required):after {
2989+
-moz-animation: inner-circles-loader 3s 0.2s reverse infinite;
2990+
-webkit-animation: inner-circles-loader 3s 0.2s reverse infinite;
2991+
animation: inner-circles-loader 3s 0.2s reverse infinite;
2992+
-moz-transform-origin: 100% 50%;
2993+
-ms-transform-origin: 100% 50%;
2994+
-webkit-transform-origin: 100% 50%;
2995+
transform-origin: 100% 50%;
2996+
right: 0;
2997+
background: #eef5db;
2998+
}
2999+
3000+
@-moz-keyframes inner-circles-loader {
3001+
0% {
3002+
-moz-transform: rotate(0deg);
3003+
transform: rotate(0deg);
3004+
}
3005+
50% {
3006+
-moz-transform: rotate(360deg);
3007+
transform: rotate(360deg);
3008+
}
3009+
100% {
3010+
-moz-transform: rotate(0deg);
3011+
transform: rotate(0deg);
3012+
}
3013+
}
3014+
@-webkit-keyframes inner-circles-loader {
3015+
0% {
3016+
-webkit-transform: rotate(0deg);
3017+
transform: rotate(0deg);
3018+
}
3019+
50% {
3020+
-webkit-transform: rotate(360deg);
3021+
transform: rotate(360deg);
3022+
}
3023+
100% {
3024+
-webkit-transform: rotate(0deg);
3025+
transform: rotate(0deg);
3026+
}
3027+
}
3028+
@keyframes inner-circles-loader {
3029+
0% {
3030+
-moz-transform: rotate(0deg);
3031+
-ms-transform: rotate(0deg);
3032+
-webkit-transform: rotate(0deg);
3033+
transform: rotate(0deg);
3034+
}
3035+
50% {
3036+
-moz-transform: rotate(360deg);
3037+
-ms-transform: rotate(360deg);
3038+
-webkit-transform: rotate(360deg);
3039+
transform: rotate(360deg);
3040+
}
3041+
100% {
3042+
-moz-transform: rotate(0deg);
3043+
-ms-transform: rotate(0deg);
3044+
-webkit-transform: rotate(0deg);
3045+
transform: rotate(0deg);
3046+
}
3047+
}

‎examples.html

+6
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,12 @@
138138
</div>
139139
</div>
140140

141+
<div class="cell">
142+
<div class="card">
143+
<span class="inner-circles-loader">Loading&#8230;</span>
144+
</div>
145+
</div>
146+
141147
</div>
142148

143149
</body>

‎sass/spinner/inner-circles.scss

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@import "compass/css3";
2+
3+
$inner-circles-loader-size: 50px !default;
4+
$inner-circles-loader-color-1: #19a598 !default;
5+
$inner-circles-loader-color-2: #c7efcf !default;
6+
$inner-circles-loader-color-3: #eef5db !default;
7+
$inner-circles-loader-speed: 3s !default;
8+
9+
/* :not(:required) hides this rule from IE9 and below */
10+
.inner-circles-loader:not(:required) {
11+
@include transform(translate3d(0, 0, 0));
12+
position: relative;
13+
display: inline-block;
14+
width: $inner-circles-loader-size;
15+
height: $inner-circles-loader-size;
16+
background: rgba($inner-circles-loader-color-1, .5);
17+
border-radius: 50%;
18+
overflow: hidden;
19+
text-indent: -9999px;
20+
21+
/* Hides inner circles outside base circle at safari */
22+
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
23+
24+
&:before, &:after {
25+
content: '';
26+
position: absolute;
27+
top: 0;
28+
display: inline-block;
29+
width: $inner-circles-loader-size;
30+
height: $inner-circles-loader-size;
31+
border-radius: 50%;
32+
}
33+
34+
&:before {
35+
@include animation(inner-circles-loader $inner-circles-loader-speed infinite);
36+
@include transform-origin(0, 50%);
37+
left: 0;
38+
background: $inner-circles-loader-color-2;
39+
}
40+
41+
&:after {
42+
@include animation(inner-circles-loader $inner-circles-loader-speed .2s reverse infinite);
43+
@include transform-origin(100%, 50%);
44+
right: 0;
45+
background: $inner-circles-loader-color-3;
46+
}
47+
}
48+
49+
@include keyframes(inner-circles-loader) {
50+
0% { @include transform(rotate(0deg)) }
51+
50% { @include transform(rotate(360deg)) }
52+
100% { @include transform(rotate(0deg)) }
53+
}

‎sass/spinners.scss

+1
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
@import "spinner/plus";
1515
@import "spinner/ball";
1616
@import "spinner/hexdots";
17+
@import "spinner/inner-circles";

0 commit comments

Comments
 (0)