|
|
@@ -0,0 +1,116 @@
|
|
|
+/**
|
|
|
+ * Stylesheet
|
|
|
+ *
|
|
|
+ * @namespace LUNGO.Widgets
|
|
|
+ * @class Loading
|
|
|
+ *
|
|
|
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
|
|
|
+ */
|
|
|
+
|
|
|
+.loading {
|
|
|
+ position:relative;
|
|
|
+ left: 50%;
|
|
|
+ height: 1em;
|
|
|
+ width: 1em;
|
|
|
+ margin-left: -.5em;
|
|
|
+ -webkit-transform-origin: .5em .5em;
|
|
|
+ -webkit-animation: rotatingLoader .5s infinite linear;
|
|
|
+
|
|
|
+ font-size: 48px;
|
|
|
+
|
|
|
+ &.small { font-size: 20px; }
|
|
|
+ &.big { font-size: 64px; }
|
|
|
+
|
|
|
+ & > span {
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -0.05em;
|
|
|
+
|
|
|
+
|
|
|
+ &, &::before, &::after {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: .1em;
|
|
|
+ height: .25em;
|
|
|
+ top: 0;
|
|
|
+ -webkit-transform-origin: .05em .5em;
|
|
|
+ border-radius: .1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before, &::after{ content: " "; }
|
|
|
+
|
|
|
+
|
|
|
+ &.top{ -webkit-transform: rotate(0deg); }
|
|
|
+ &.right{ -webkit-transform: rotate(90deg); }
|
|
|
+ &.bottom{ -webkit-transform: rotate(180deg); }
|
|
|
+ &.left{ -webkit-transform: rotate(270deg); }
|
|
|
+
|
|
|
+ &::before{ -webkit-transform: rotate(30deg); }
|
|
|
+ &::after{ -webkit-transform: rotate(-30deg); }
|
|
|
+
|
|
|
+ &.top { background-color: rgba(0,0,0,0.99); }
|
|
|
+ &.top::after { background-color: rgba(0,0,0,0.90); }
|
|
|
+ &.left::before { background-color: rgba(0,0,0,0.80); }
|
|
|
+ &.left { background-color: rgba(0,0,0,0.70); }
|
|
|
+ &.left::after { background-color: rgba(0,0,0,0.60); }
|
|
|
+ &.bottom::before{ background-color: rgba(0,0,0,0.50); }
|
|
|
+ &.bottom { background-color: rgba(0,0,0,0.40); }
|
|
|
+ &.bottom::after { background-color: rgba(0,0,0,0.35); }
|
|
|
+ &.right::before { background-color: rgba(0,0,0,0.30); }
|
|
|
+ &.right { background-color: rgba(0,0,0,0.25); }
|
|
|
+ &.right::after { background-color: rgba(0,0,0,0.20); }
|
|
|
+ &.top::before { background-color: rgba(0,0,0,0.15); }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.white > span {
|
|
|
+ &.top { background-color: rgba(255,255,255,0.99); }
|
|
|
+ &.top::after { background-color: rgba(255,255,255,0.90); }
|
|
|
+ &.left::before { background-color: rgba(255,255,255,0.80); }
|
|
|
+ &.left { background-color: rgba(255,255,255,0.70); }
|
|
|
+ &.left::after { background-color: rgba(255,255,255,0.60); }
|
|
|
+ &.bottom::before{ background-color: rgba(255,255,255,0.50); }
|
|
|
+ &.bottom { background-color: rgba(255,255,255,0.40); }
|
|
|
+ &.bottom::after { background-color: rgba(255,255,255,0.35); }
|
|
|
+ &.right::before { background-color: rgba(255,255,255,0.30); }
|
|
|
+ &.right { background-color: rgba(255,255,255,0.25); }
|
|
|
+ &.right::after { background-color: rgba(255,255,255,0.20); }
|
|
|
+ &.top::before { background-color: rgba(255,255,255,0.15); }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes rotatingLoader{
|
|
|
+ 0%{ -webkit-transform: rotate(0deg); }
|
|
|
+ 8.32%{ -webkit-transform: rotate(0deg); }
|
|
|
+
|
|
|
+ 8.33%{ -webkit-transform: rotate(30deg); }
|
|
|
+ 16.65%{ -webkit-transform: rotate(30deg); }
|
|
|
+
|
|
|
+ 16.66%{ -webkit-transform: rotate(60deg); }
|
|
|
+ 24.99%{ -webkit-transform: rotate(60deg); }
|
|
|
+
|
|
|
+ 25%{ -webkit-transform: rotate(90deg); }
|
|
|
+ 33.32%{ -webkit-transform: rotate(90deg); }
|
|
|
+
|
|
|
+ 33.33%{ -webkit-transform: rotate(120deg); }
|
|
|
+ 41.65%{ -webkit-transform: rotate(120deg); }
|
|
|
+
|
|
|
+ 41.66%{ -webkit-transform: rotate(150deg); }
|
|
|
+ 49.99%{ -webkit-transform: rotate(150deg); }
|
|
|
+
|
|
|
+ 50%{ -webkit-transform: rotate(180deg); }
|
|
|
+ 58.32%{ -webkit-transform: rotate(180deg); }
|
|
|
+
|
|
|
+ 58.33%{ -webkit-transform: rotate(210deg); }
|
|
|
+ 66.65%{ -webkit-transform: rotate(210deg); }
|
|
|
+
|
|
|
+ 66.66%{ -webkit-transform: rotate(240deg); }
|
|
|
+ 74.99%{ -webkit-transform: rotate(240deg); }
|
|
|
+
|
|
|
+ 75%{ -webkit-transform: rotate(270deg); }
|
|
|
+ 83.32%{ -webkit-transform: rotate(270deg); }
|
|
|
+
|
|
|
+ 83.33%{ -webkit-transform: rotate(300deg); }
|
|
|
+ 91.65%{ -webkit-transform: rotate(300deg); }
|
|
|
+
|
|
|
+ 91.66%{ -webkit-transform: rotate(330deg); }
|
|
|
+ 100%{ -webkit-transform: rotate(330deg); }
|
|
|
+}
|
@soyjavi