Skip to content

Commit 52dc75f

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
rearrange
1 parent 42b9337 commit 52dc75f

File tree

6 files changed

+218
-146
lines changed

6 files changed

+218
-146
lines changed

‎css/workshop.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ body section:nth-child(2n + 1) {
4040
background: rgba(0, 0, 0, 0.1);
4141
}
4242

43+
.md-1 .loader {
44+
position: relative;
45+
width: 100px;
46+
height: 16px;
47+
}
48+
4349
.md-0 .loader {
4450
position: relative;
4551
width: 64px;

‎js/loaders/bubble.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,62 @@ export const BUBBLE = [
649649
}
650650
`,
651651
},
652+
{
653+
id: "ballCrdLd",
654+
html: `<span class="loader"></span>`,
655+
css: `.loader {
656+
position: relative;
657+
width: 100px;
658+
height: 16px;
659+
}
660+
.loader:before , .loader:after{
661+
content: "";
662+
position: absolute;
663+
width: 16px;
664+
height: 16px;
665+
border-radius: 50%;
666+
background: #fff;
667+
box-shadow: 32px 0 #fff;
668+
left: 0;
669+
top: 0;
670+
animation: ballMoveX 2s linear infinite;
671+
}
672+
.loader:after {
673+
box-shadow: none;
674+
transform: translateX(64px) scale(1);
675+
z-index: 2;
676+
animation: none;
677+
animation: trfLoader 2s linear infinite;
678+
}
679+
680+
@keyframes trfLoader {
681+
0% , 5%{
682+
transform: translateX(64px) scale(1);
683+
background: #FFF;
684+
}
685+
10%{
686+
transform: translateX(64px) scale(1);
687+
background: #ff3d00;
688+
}
689+
40%{
690+
transform: translateX(32px) scale(1.5);
691+
background: #ff3d00;
692+
}
693+
90%, 95% {
694+
transform: translateX(0px) scale(1);
695+
background: #ff3d00;
696+
}
697+
100% {
698+
transform: translateX(0px) scale(1);
699+
background: #FFF;
700+
}
701+
}
702+
@keyframes ballMoveX {
703+
0% , 10%{ transform: translateX(0) }
704+
90%, 100% { transform: translateX(32px) }
705+
}
706+
`,
707+
},
652708

653709
{
654710
id: "ball4puncUp",

‎js/loaders/graph.js

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -159,47 +159,7 @@ export const GRAPH = [
159159
}
160160
`,
161161
},
162-
{
163-
id: "sprLgLdg",
164-
html: `<span class="loader"></span>`,
165-
css: `.loader {
166-
width: 150px;
167-
height: 150px;
168-
background-color: #ff3d00;
169-
border-radius: 50%;
170-
position: relative;
171-
box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
172-
0 5px 12px rgba(0, 0, 0, 0.15);
173-
overflow: hidden;
174-
}
175-
.loader:before,
176-
.loader:after {
177-
content: "";
178-
position: absolute;
179-
width: 100%;
180-
height: 100%;
181-
border-radius: 45%;
182-
top: -40%;
183-
background-color: #fff;
184-
animation: wave 5s linear infinite;
185-
}
186-
.loader:before {
187-
border-radius: 30%;
188-
background: rgba(255, 255, 255, 0.4);
189-
animation: wave 5s linear infinite;
190-
}
191-
@keyframes wave {
192-
0% {
193-
transform: rotate(0);
194-
}
195-
100% {
196-
transform: rotate(360deg);
197-
}
198-
}
199-
`,
200-
},
201-
202-
162+
203163

204164
{
205165
id: "gHomeChrgLdingFlash",

‎js/loaders/objects.js

Lines changed: 85 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,5 @@
11
export const OBJECTS = [
2-
{
3-
id: "stackLyrXp",
4-
html: `<span class="loader"></span>`,
5-
css: `.loader {
6-
position: relative;
7-
width: 48px;
8-
height: 48px;
9-
background: #de3500;
10-
transform: rotateX(65deg) rotate(45deg);
11-
// remove bellows command for perspective change
12-
//transform: perspective(200px) rotateX(65deg) rotate(45deg);
13-
color: #fff;
14-
animation: layers1 1s linear infinite alternate;
15-
}
16-
.loader:after {
17-
content: '';
18-
position: absolute;
19-
inset: 0;
20-
background: rgba(255, 255, 255, 0.7);
21-
animation: layerTr 1s linear infinite alternate;
22-
}
232

24-
@keyframes layers1 {
25-
0% { box-shadow: 0px 0px 0 0px }
26-
90% , 100% { box-shadow: 20px 20px 0 -4px }
27-
}
28-
@keyframes layerTr {
29-
0% { transform: translate(0, 0) scale(1) }
30-
100% { transform: translate(-25px, -25px) scale(1) }
31-
}
32-
`,
33-
},
34-
{
35-
id: "sqrBxRol",
36-
html: `<span class="loader"></span>`,
37-
css: `.loader {
38-
background: #de3500;
39-
width: 48px;
40-
height: 48px;
41-
position: relative;
42-
text-align: center;
43-
animation: 3s rotate linear infinite;
44-
}
45-
.loader:before {
46-
content: "";
47-
position: absolute;
48-
top: 0;
49-
left: 0;
50-
height: 100%;
51-
width: 100%;
52-
background: #FFFF;
53-
animation: 1.5s rotate reverse linear infinite ;
54-
55-
}
56-
@keyframes rotate {
57-
0%{ transform: rotate(0deg)}
58-
100%{ transform: rotate(360deg)}
59-
}
60-
`,
61-
},
623

634
{
645
id: "linQbFll",
@@ -2081,6 +2022,90 @@ export const OBJECTS = [
20812022
}
20822023
`,
20832024
},
2025+
{
2026+
id: "sprLgLdg",
2027+
html: `<span class="loader"></span>`,
2028+
css: `.loader {
2029+
width: 150px;
2030+
height: 150px;
2031+
background-color: #ff3d00;
2032+
border-radius: 50%;
2033+
position: relative;
2034+
box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
2035+
0 5px 12px rgba(0, 0, 0, 0.15);
2036+
overflow: hidden;
2037+
}
2038+
.loader:before,
2039+
.loader:after {
2040+
content: "";
2041+
position: absolute;
2042+
width: 100%;
2043+
height: 100%;
2044+
border-radius: 45%;
2045+
top: -40%;
2046+
background-color: #fff;
2047+
animation: wave 5s linear infinite;
2048+
}
2049+
.loader:before {
2050+
border-radius: 30%;
2051+
background: rgba(255, 255, 255, 0.4);
2052+
animation: wave 5s linear infinite;
2053+
}
2054+
@keyframes wave {
2055+
0% {
2056+
transform: rotate(0);
2057+
}
2058+
100% {
2059+
transform: rotate(360deg);
2060+
}
2061+
}
2062+
`,
2063+
},
2064+
2065+
{
2066+
id: "cheLoad",
2067+
html: `<span class="loader"></span>`,
2068+
css: `.loader {
2069+
width: 96px;
2070+
box-sizing: content-box;
2071+
height: 48px;
2072+
background: #FFF;
2073+
border-color: #de3500;
2074+
border-style: solid;
2075+
border-width: 2px 2px 50px 2px;
2076+
border-radius: 100%;
2077+
position: relative;
2078+
animation: 3s yinYang linear infinite;
2079+
}
2080+
.loader:before {
2081+
content: "";
2082+
position: absolute;
2083+
top: 50%;
2084+
left: 0;
2085+
background: #FFF;
2086+
border: 18px solid #de3500;
2087+
border-radius: 100%;
2088+
width: 12px;
2089+
height: 12px;
2090+
box-sizing: content-box;
2091+
}
2092+
.loader:after {
2093+
content: "";
2094+
position: absolute;
2095+
top: 50%;
2096+
left: 50%;
2097+
background: #de3500;
2098+
border: 18px solid #FFF;
2099+
border-radius: 100%;
2100+
width: 12px;
2101+
height: 12px;
2102+
box-sizing: content-box;
2103+
}
2104+
@keyframes yinYang {
2105+
100%{transform: rotate(360deg)}
2106+
}
2107+
`,
2108+
},
20842109

20852110
{
20862111
id: "mouseScrDwn",
@@ -2798,48 +2823,5 @@ export const OBJECTS = [
27982823
}
27992824
`,
28002825
},
2801-
{
2802-
id: "cheLoad",
2803-
html: `<span class="loader"></span>`,
2804-
css: `.loader {
2805-
width: 96px;
2806-
box-sizing: content-box;
2807-
height: 48px;
2808-
background: #FFF;
2809-
border-color: #de3500;
2810-
border-style: solid;
2811-
border-width: 2px 2px 50px 2px;
2812-
border-radius: 100%;
2813-
position: relative;
2814-
animation: 3s yinYang linear infinite;
2815-
}
2816-
.loader:before {
2817-
content: "";
2818-
position: absolute;
2819-
top: 50%;
2820-
left: 0;
2821-
background: #FFF;
2822-
border: 18px solid #de3500;
2823-
border-radius: 100%;
2824-
width: 12px;
2825-
height: 12px;
2826-
box-sizing: content-box;
2827-
}
2828-
.loader:after {
2829-
content: "";
2830-
position: absolute;
2831-
top: 50%;
2832-
left: 50%;
2833-
background: #de3500;
2834-
border: 18px solid #FFF;
2835-
border-radius: 100%;
2836-
width: 12px;
2837-
height: 12px;
2838-
box-sizing: content-box;
2839-
}
2840-
@keyframes yinYang {
2841-
100%{transform: rotate(360deg)}
2842-
}
2843-
`,
2844-
},
2826+
28452827
]

0 commit comments

Comments
 (0)