Skip to content

Commit 02ec96e

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
spin 249
1 parent c9aed3f commit 02ec96e

File tree

5 files changed

+198
-83
lines changed

5 files changed

+198
-83
lines changed

‎css/styles.css‎

Lines changed: 22 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1347,54 +1347,42 @@ code {
13471347
}
13481348

13491349
#demo .loader {
1350-
width: 48px;
1351-
height: 86px;
1350+
width: 32px;
1351+
height: 32px;
1352+
transform: translateY(100%);
1353+
border-radius: 50%;
1354+
background: #FFF;
13521355
position: relative;
13531356
}
13541357

1355-
#demo .loader::before {
1356-
content: '';
1358+
#demo .loader:before, #demo .loader:after {
1359+
content: "";
13571360
position: absolute;
1358-
left: 50%;
1359-
top: 0;
1360-
transform: translate(-50%, 50%);
1361-
width: 10px;
1362-
height: 10px;
1363-
background: #FFF;
1361+
width: 100%;
1362+
height: 100%;
13641363
border-radius: 50%;
1365-
animation: bounce 1s ease-in infinite alternate;
1364+
background: #FFF;
1365+
left: 50%;
1366+
transform: translateX(-50%);
1367+
top: -200%;
13661368
}
13671369

1368-
#demo .loader::after {
1369-
content: '';
1370-
left: 0;
1371-
top: 0;
1372-
position: absolute;
1373-
width: 48px;
1374-
height: 86px;
1375-
box-sizing: border-box;
1376-
border: 2px solid #fff;
1377-
border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
1378-
animation: kick 1s ease-in infinite alternate;
1370+
#demo .loader:after {
1371+
animation: moveX 0.5s infinite linear alternate;
13791372
}
13801373

1381-
@keyframes bounce {
1374+
@keyframes moveX {
13821375
0% {
13831376
top: 0%;
1384-
opacity: 1;
1385-
}
1386-
100% {
1387-
top: 75%;
1388-
opacity: 0.2;
1377+
transform: translateX(-50%) scale(1.5);
13891378
}
1390-
}
1391-
1392-
@keyframes kick {
1393-
0%, 75% {
1394-
height: 86px;
1379+
50% {
1380+
top: -75%;
1381+
transform: translateX(-50%) scale(0.5);
13951382
}
13961383
100% {
1397-
height: 78px;
1384+
top: -200%;
1385+
transform: translateX(-50%) scale(1.5);
13981386
}
13991387
}
14001388

‎images/Cooking.mp4‎

115 KB
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,8 @@
4444
<span class="brand"> L &nbsp; ader </span>
4545

4646
<nav>
47-
<script id="_wau5m8">
48-
var _wau = _wau || []; _wau.push(["dynamic", "dicn9wgmzg", "5m8", "0d161bffffff", "small"]);
49-
</script>
50-
5147
<a class="nav-btn codepen" target="_blank" href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
5248
<a class="nav-btn git" target="_blank" href="https://github.com/vineethtrv/css-loader"></a>
53-
5449
</nav>
5550
</header>
5651

@@ -91,7 +86,7 @@
9186
</div>
9287
</div>
9388
</div>
94-
<script async src="//waust.at/d.js"></script>
89+
9590
<script type="module" src="./js/app.js"></script>
9691
</body>
9792
</html>

‎js/loaders/circle.js‎

Lines changed: 149 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1345,7 +1345,7 @@ export const CIRCLE = [
13451345
},
13461346

13471347
{
1348-
id: "coin-flip-b8sp",
1348+
id: "vishuChakra",
13491349
html: `<span class="loader"></span>`,
13501350
css: `.loader {
13511351
font-size:48px;
@@ -1403,6 +1403,154 @@ export const CIRCLE = [
14031403
}
14041404
`,
14051405
},
1406+
1407+
{
1408+
id: "chkarBlast",
1409+
html: `<span class="loader"></span>`,
1410+
css: `.loader {
1411+
width: 48px;
1412+
height: 48px;
1413+
position: relative;
1414+
}
1415+
.loader::before , .loader::after{
1416+
content: '';
1417+
position: absolute;
1418+
left: 50%;
1419+
top: 50%;
1420+
transform: translate(-50% , -50%);
1421+
width: 48em;
1422+
height: 48em;
1423+
background-image:
1424+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1425+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1426+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1427+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1428+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1429+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1430+
radial-gradient(circle 10px, #FFF 100%, transparent 0),
1431+
radial-gradient(circle 10px, #FFF 100%, transparent 0);
1432+
background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
1433+
13em -13em, -13em -13em, 13em 13em, -13em 13em;
1434+
background-repeat: no-repeat;
1435+
font-size: 0.5px;
1436+
border-radius: 50%;
1437+
animation: blast 1s ease-in infinite;
1438+
}
1439+
.loader::after {
1440+
font-size: 1px;
1441+
background: #fff;
1442+
animation: bounce 1s ease-in infinite;
1443+
}
1444+
1445+
@keyframes bounce {
1446+
0% , 100%{ font-size: 0.75px }
1447+
50% { font-size: 1.5px }
1448+
}
1449+
@keyframes blast {
1450+
0% , 40% {
1451+
font-size: 0.5px;
1452+
}
1453+
70% {
1454+
opacity: 1;
1455+
font-size: 4px;
1456+
}
1457+
100% {
1458+
font-size: 6px;
1459+
opacity: 0;
1460+
}
1461+
}
1462+
`,
1463+
},
1464+
{
1465+
id: "spnkInfBablRot",
1466+
html: `<span class="loader"></span>`,
1467+
css: `.loader {
1468+
width: calc(100px - 24px);
1469+
height: 50px;
1470+
position: relative;
1471+
animation: flippx 2s infinite linear;
1472+
}
1473+
.loader:before {
1474+
content: "";
1475+
position: absolute;
1476+
inset: 0;
1477+
margin: auto;
1478+
width: 20px;
1479+
height: 20px;
1480+
border-radius: 50%;
1481+
background: #FFF;
1482+
transform-origin: -24px 50%;
1483+
animation: spin 1s infinite linear;
1484+
}
1485+
.loader:after {
1486+
content: "";
1487+
position: absolute;
1488+
left: 50%;
1489+
top: 50%;
1490+
transform: translate(-50% , -50%);
1491+
background: #fff;
1492+
width: 48px;
1493+
height: 48px;
1494+
border-radius: 50%;
1495+
}
1496+
1497+
@keyframes flippx {
1498+
0%, 49% {
1499+
transform: scaleX(1);
1500+
}
1501+
50%, 100% {
1502+
transform: scaleX(-1);
1503+
}
1504+
}
1505+
@keyframes spin {
1506+
100% {
1507+
transform: rotate(360deg);
1508+
}
1509+
}
1510+
`,
1511+
},
1512+
{
1513+
id: "ranDrpBblHrflx",
1514+
html: `<span class="loader"></span>`,
1515+
css: `.loader {
1516+
width: 32px;
1517+
height: 32px;
1518+
transform: translateY(100%);
1519+
border-radius: 50%;
1520+
background: #FFF;
1521+
position: relative;
1522+
}
1523+
.loader:before , .loader:after{
1524+
content: "";
1525+
position: absolute;
1526+
width: 100%;
1527+
height: 100%;
1528+
border-radius: 50%;
1529+
background: #FFF;
1530+
left: 50%;
1531+
transform: translateX(-50%);
1532+
top: -200%;
1533+
}
1534+
.loader:after {
1535+
animation: moveX 0.5s infinite linear alternate;
1536+
}
1537+
1538+
@keyframes moveX {
1539+
0% {
1540+
top: 0% ;
1541+
transform: translateX(-50%) scale(1.5);
1542+
}
1543+
50% {
1544+
top: -75% ;
1545+
transform: translateX(-50%) scale(0.5);
1546+
}
1547+
100% {
1548+
top: -200%;
1549+
transform: translateX(-50%) scale(1.5);
1550+
}
1551+
}
1552+
`,
1553+
},
14061554

14071555
{
14081556
id: "coin-flip-b8sp",

‎scss/styles.scss‎

Lines changed: 26 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -17,60 +17,44 @@ display: none !important;
1717

1818

1919

20-
21-
22-
23-
24-
2520
.loader {
26-
width: 48px;
27-
height: 86px;
21+
width: 32px;
22+
height: 32px;
23+
transform: translateY(100%);
24+
border-radius: 50%;
25+
background: #FFF;
2826
position: relative;
2927
}
30-
31-
.loader::before {
32-
content: '';
28+
.loader:before , .loader:after{
29+
content: "";
3330
position: absolute;
34-
left: 50%;
35-
top: 0;
36-
transform: translate(-50% , 50%);
37-
width: 10px;
38-
height: 10px;
39-
background: #FFF;
31+
width: 100%;
32+
height: 100%;
4033
border-radius: 50%;
41-
animation: bounce 1s ease-in infinite alternate;
34+
background: #FFF;
35+
left: 50%;
36+
transform: translateX(-50%);
37+
top: -200%;
4238
}
43-
.loader::after {
44-
content: '';
45-
left: 0;
46-
top: 0;
47-
position: absolute;
48-
width: 48px;
49-
height: 86px;
50-
box-sizing: border-box;
51-
border: 2px solid #fff;
52-
border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
53-
animation: kick 1s ease-in infinite alternate;
39+
.loader:after {
40+
animation: moveX 0.5s infinite linear alternate;
5441
}
5542

56-
@keyframes bounce {
57-
0% {
58-
top: 0%;
59-
opacity: 1;
60-
}
61-
100% {
62-
top: 75%;
63-
opacity: 0.2;
43+
@keyframes moveX {
44+
0% {
45+
top: 0% ;
46+
transform: translateX(-50%) scale(1.5);
6447
}
65-
}
66-
@keyframes kick {
67-
0% , 75% {
68-
height: 86px
48+
50% {
49+
top: -75% ;
50+
transform: translateX(-50%) scale(0.5);
6951
}
70-
100% {
71-
height: 78px
52+
100% {
53+
top: -200%;
54+
transform: translateX(-50%) scale(1.5);
7255
}
7356
}
57+
7458

7559

7660

0 commit comments

Comments
 (0)