Skip to content

Instantly share code, notes, and snippets.

@idiazroncero

idiazroncero/Simple triangle spinner.markdown

Created July 8, 2015 12:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save idiazroncero/c668c49926ab68bc4fcb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save idiazroncero/c668c49926ab68bc4fcb to your computer and use it in GitHub Desktop.
Download ZIP
Simple triangle spinner
Raw
index.html
<div class="eemwait-sq">
<span class="eemwait-sq1"></span>
<span class="eemwait-sq2"></span>
<span class="eemwait-sq3"></span>
<span class="eemwait-sq4"></span>
</div>
Raw
Simple triangle spinner.markdown
Raw
style.css
@keyframes sq-1 {
/* line 94, ../sass/modules/_eemwait.scss */
0% {
top: 0;
}
/* line 97, ../sass/modules/_eemwait.scss */
13% {
top: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 101, ../sass/modules/_eemwait.scss */
25% {
top: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 105, ../sass/modules/_eemwait.scss */
75% {
top: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 109, ../sass/modules/_eemwait.scss */
88% {
top: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 113, ../sass/modules/_eemwait.scss */
100% {
top: 0;
}
}
@keyframes sq-2 {
/* line 119, ../sass/modules/_eemwait.scss */
0% {
right: 0;
}
/* line 122, ../sass/modules/_eemwait.scss */
13% {
right: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 126, ../sass/modules/_eemwait.scss */
25% {
right: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 130, ../sass/modules/_eemwait.scss */
75% {
right: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 134, ../sass/modules/_eemwait.scss */
88% {
right: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 138, ../sass/modules/_eemwait.scss */
100% {
right: 0;
}
}
@keyframes sq-3 {
/* line 144, ../sass/modules/_eemwait.scss */
0% {
bottom: 0;
}
/* line 147, ../sass/modules/_eemwait.scss */
13% {
bottom: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 151, ../sass/modules/_eemwait.scss */
25% {
bottom: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 155, ../sass/modules/_eemwait.scss */
75% {
bottom: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 159, ../sass/modules/_eemwait.scss */
88% {
bottom: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 163, ../sass/modules/_eemwait.scss */
100% {
bottom: 0;
}
}
@keyframes sq-4 {
/* line 169, ../sass/modules/_eemwait.scss */
0% {
left: 0;
}
/* line 172, ../sass/modules/_eemwait.scss */
13% {
left: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 176, ../sass/modules/_eemwait.scss */
25% {
left: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 180, ../sass/modules/_eemwait.scss */
75% {
left: -15%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* line 184, ../sass/modules/_eemwait.scss */
88% {
left: -15%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/* line 188, ../sass/modules/_eemwait.scss */
100% {
left: 0;
}
}
@keyframes sq-spin {
/* line 194, ../sass/modules/_eemwait.scss */
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 197, ../sass/modules/_eemwait.scss */
25% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 200, ../sass/modules/_eemwait.scss */
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/* line 203, ../sass/modules/_eemwait.scss */
75% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* line 206, ../sass/modules/_eemwait.scss */
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* line 213, ../sass/modules/_eemwait.scss */
.eemwait-sq {
width: 20px;
height: 20px;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: translate(-50% -50%);
-moz-transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
-o-transform: translate(-50% -50%);
transform: translate(-50% -50%);
animation: sq-spin 4s ease-in-out 0s infinite normal;
}
/* line 224, ../sass/modules/_eemwait.scss */
.eemwait-sq1 {
position: absolute;
width: 0px;
height: 0px;
border-width: 10px;
border-style: solid;
border-color: #252525 transparent transparent transparent;
top: 0;
animation: sq-1 4s linear 0s infinite normal;
animation-fill-mode: forwards;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
transform-origin: 50% 0;
}
/* line 237, ../sass/modules/_eemwait.scss */
.eemwait-sq2 {
position: absolute;
width: 0px;
height: 0px;
border-width: 10px;
border-style: solid;
border-color: transparent #252525 transparent transparent;
right: 0;
animation: sq-2 4s linear 0s infinite normal;
animation-fill-mode: forwards;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
transform-origin: 100% 50%;
}
/* line 250, ../sass/modules/_eemwait.scss */
.eemwait-sq3 {
position: absolute;
width: 0px;
height: 0px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #252525 transparent;
bottom: 0;
animation: sq-3 4s linear 0s infinite normal;
animation-fill-mode: forwards;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
transform-origin: 50% 100%;
}
/* line 263, ../sass/modules/_eemwait.scss */
.eemwait-sq4 {
position: absolute;
width: 0px;
height: 0px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent #252525;
left: 0;
animation: sq-4 4s linear 0s infinite normal;
animation-fill-mode: forwards;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
transform-origin: 0 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment