Skip to content

Commit fad3e22

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
spin 296
1 parent 52dc75f commit fad3e22

File tree

6 files changed

+396
-253
lines changed

6 files changed

+396
-253
lines changed

‎css/workshop.css

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,3 @@ body section:nth-child(2n + 1) {
4545
width: 100px;
4646
height: 16px;
4747
}
48-
49-
.md-0 .loader {
50-
position: relative;
51-
width: 64px;
52-
height: 64px;
53-
background-image: linear-gradient(#fff 45px, transparent 0), linear-gradient(#fff 20px, transparent 0), linear-gradient(#fff 20px, transparent 0);
54-
background-repeat: no-repeat;
55-
background-size: 30px 4px;
56-
background-position: 0px 11px , 8px 35px, 0px 60px;
57-
}

‎js/loaders/bubble.js

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -321,8 +321,44 @@ export const BUBBLE = [
321321
}
322322
`
323323
},
324+
{
325+
id: "msgerBblFdxbl",
326+
html: `<span class="loader"></span>`,
327+
css: `.loader, .loader:before, .loader:after {
328+
border-radius: 50%;
329+
width: 2.5em;
330+
height: 2.5em;
331+
animation-fill-mode: both;
332+
animation: bblFadInOut 1.8s infinite ease-in-out;
333+
}
334+
.loader {
335+
color: #FFF;
336+
font-size: 7px;
337+
position: relative;
338+
text-indent: -9999em;
339+
transform: translateZ(0);
340+
animation-delay: -0.16s;
341+
}
342+
.loader:before,
343+
.loader:after {
344+
content: '';
345+
position: absolute;
346+
top: 0;
347+
}
348+
.loader:before {
349+
left: -3.5em;
350+
animation-delay: -0.32s;
351+
}
352+
.loader:after {
353+
left: 3.5em;
354+
}
324355
325-
356+
@keyframes bblFadInOut {
357+
0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
358+
40% { box-shadow: 0 2.5em 0 0 }
359+
}
360+
`
361+
},
326362
{
327363
id: "msgerBblLdan3xbl",
328364
html: `<span class="loader"></span>`,
@@ -338,16 +374,16 @@ export const BUBBLE = [
338374
339375
@keyframes flash {
340376
0% {
341-
background-color: rgba(255, 255, 255, 0.25);
342-
box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 1);
377+
background-color: #FFF2;
378+
box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
343379
}
344380
50% {
345-
background-color: rgba(255, 255, 255, 1);
346-
box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25);
381+
background-color: #FFF;
382+
box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
347383
}
348384
100% {
349-
background-color: rgba(255, 255, 255, 0.25);
350-
box-shadow: 32px 0 rgba(255, 255, 255, 1), -32px 0 rgba(255, 255, 255, 0.25);
385+
background-color: #FFF2;
386+
box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
351387
}
352388
}
353389
`

‎js/loaders/circle.js

Lines changed: 153 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -771,67 +771,171 @@ export const CIRCLE = [
771771
},
772772

773773
{
774-
id: "2y45kuxbrr",
774+
id: "bblRgAl",
775775
html: `<span class="loader"></span>`,
776776
css: `.loader {
777-
width: 40px;
778-
height: 40px;
777+
color: #fff;
778+
font-size: 10px;
779+
width: 1em;
780+
height: 1em;
779781
border-radius: 50%;
780-
display: inline-block;
781782
position: relative;
783+
text-indent: -9999em;
784+
animation: mulShdSpin 1.3s infinite linear;
785+
transform: translateZ(0);
782786
}
783-
.loader::after {
784-
content: '';
785-
width: 16px;
786-
height: 16px;
787-
border-radius: 50%;
788-
position: absolute;
789-
left: 0;
790-
transform: translate(-50%, 100%);
791-
box-sizing: border-box;
792-
animation: animloader 1s linear infinite;
793-
top: 0;
794-
}
795787
796-
@keyframes animloader {
797-
0% {
798-
background: white;
799-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
800-
}
801-
14% {
802-
background: rgba(255, 255, 255, 0);
803-
box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
804-
}
805-
28% {
806-
background: rgba(255, 255, 255, 0);
807-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
788+
@keyframes mulShdSpin {
789+
0%,
790+
100% {
791+
box-shadow: 0 -3em 0 0.2em,
792+
2em -2em 0 0em, 3em 0 0 -1em,
793+
2em 2em 0 -1em, 0 3em 0 -1em,
794+
-2em 2em 0 -1em, -3em 0 0 -1em,
795+
-2em -2em 0 0;
796+
}
797+
12.5% {
798+
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
799+
3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
800+
-2em 2em 0 -1em, -3em 0 0 -1em,
801+
-2em -2em 0 -1em;
802+
}
803+
25% {
804+
box-shadow: 0 -3em 0 -0.5em,
805+
2em -2em 0 0, 3em 0 0 0.2em,
806+
2em 2em 0 0, 0 3em 0 -1em,
807+
-2em 2em 0 -1em, -3em 0 0 -1em,
808+
-2em -2em 0 -1em;
809+
}
810+
37.5% {
811+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
812+
3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
813+
-2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
814+
}
815+
50% {
816+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
817+
3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
818+
-2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
819+
}
820+
62.5% {
821+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
822+
3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
823+
-2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
824+
}
825+
75% {
826+
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
827+
3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
828+
-2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
829+
}
830+
87.5% {
831+
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
832+
3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
833+
-2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
834+
}
808835
}
809-
42% {
810-
background: rgba(255, 255, 255, 0);
811-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
836+
`,
837+
},
838+
839+
{
840+
id: "bbMtAls",
841+
html: `<span class="loader"></span>`,
842+
css: `.loader {
843+
font-size: 10px;
844+
width: 1em;
845+
height: 1em;
846+
border-radius: 50%;
847+
position: relative;
848+
text-indent: -9999em;
849+
animation: mulShdSpin 1.1s infinite ease;
850+
transform: translateZ(0);
812851
}
813-
57% {
814-
background: rgba(255, 255, 255, 0);
815-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
852+
@keyframes mulShdSpin {
853+
0%,
854+
100% {
855+
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
856+
}
857+
12.5% {
858+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
859+
}
860+
25% {
861+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
862+
}
863+
37.5% {
864+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
865+
}
866+
50% {
867+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
868+
}
869+
62.5% {
870+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
871+
}
872+
75% {
873+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
874+
}
875+
87.5% {
876+
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
877+
}
816878
}
817-
71% {
818-
background: rgba(255, 255, 255, 0);
819-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
879+
`,
880+
},
881+
{
882+
id: "bbMlShinf",
883+
html: `<span class="loader"></span>`,
884+
css: `.loader {
885+
color: #ffffff;
886+
font-size: 45px;
887+
text-indent: -9999em;
888+
overflow: hidden;
889+
width: 1em;
890+
height: 1em;
891+
border-radius: 50%;
892+
position: relative;
893+
transform: translateZ(0);
894+
animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
820895
}
821-
85% {
822-
background: rgba(255, 255, 255, 0);
823-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
896+
897+
@keyframes mltShdSpin {
898+
0% {
899+
box-shadow: 0 -0.83em 0 -0.4em,
900+
0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
901+
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
902+
}
903+
5%,
904+
95% {
905+
box-shadow: 0 -0.83em 0 -0.4em,
906+
0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
907+
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
908+
}
909+
10%,
910+
59% {
911+
box-shadow: 0 -0.83em 0 -0.4em,
912+
-0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
913+
-0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
914+
}
915+
20% {
916+
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
917+
-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
918+
-0.749em -0.34em 0 -0.477em;
919+
}
920+
38% {
921+
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
922+
-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
923+
-0.82em -0.09em 0 -0.477em;
924+
}
925+
100% {
926+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em,
927+
0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
928+
}
824929
}
825-
100% {
826-
background: rgba(255, 255, 255, 0.5);
827-
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
930+
931+
@keyframes round {
932+
0% { transform: rotate(0deg) }
933+
100% { transform: rotate(360deg) }
828934
}
829-
}
830-
`,
831-
},
935+
`,
936+
},
832937

833938

834-
835939
{
836940
id: "7en5eji78kt",
837941
html: `<span class="loader"></span>`,
@@ -858,12 +962,8 @@ export const CIRCLE = [
858962
background: #263238;
859963
}
860964
@keyframes rotation {
861-
0% {
862-
transform: rotate(0deg);
863-
}
864-
100% {
865-
transform: rotate(360deg);
866-
}
965+
0% { transform: rotate(0deg) }
966+
100% { transform: rotate(360deg)}
867967
} `,
868968
},
869969

0 commit comments

Comments
 (0)