Skip to content

Commit b84f440

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
spin 246
1 parent 38fdc60 commit b84f440

File tree

4 files changed

+268
-86
lines changed

4 files changed

+268
-86
lines changed

‎css/styles.css

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1347,8 +1347,8 @@ code {
13471347
}
13481348

13491349
#demo .loader {
1350-
width: 50px;
1351-
height: 165px;
1350+
width: 48px;
1351+
height: 86px;
13521352
position: relative;
13531353
}
13541354

@@ -1357,60 +1357,44 @@ code {
13571357
position: absolute;
13581358
left: 50%;
13591359
top: 0;
1360-
transform: translate(-50%, 0);
1361-
width: 16px;
1362-
height: 16px;
1363-
background: #FF3D00;
1360+
transform: translate(-50%, 50%);
1361+
width: 10px;
1362+
height: 10px;
1363+
background: #FFF;
13641364
border-radius: 50%;
1365-
animation: bounce 2s linear infinite;
1365+
animation: bounce 1s ease-in infinite alternate;
13661366
}
13671367

13681368
#demo .loader::after {
13691369
content: '';
1370-
position: absolute;
13711370
left: 0;
1372-
right: 0;
1373-
bottom: 0;
1374-
margin: auto;
1375-
height: 48px;
1371+
top: 0;
1372+
position: absolute;
13761373
width: 48px;
1377-
background: #fff;
1378-
border-radius: 4px;
1379-
animation: rotate 2s linear infinite;
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;
13801379
}
13811380

13821381
@keyframes bounce {
1383-
0%, 50%, 100% {
1384-
transform: translate(-50%, 0px);
1385-
height: 20px;
1386-
}
1387-
20% {
1388-
transform: translate(-25%, 85px);
1389-
height: 28px;
1390-
}
1391-
25% {
1392-
transform: translate(-25%, 110px);
1393-
height: 12px;
1394-
}
1395-
70% {
1396-
transform: translate(-75%, 85px);
1397-
height: 28px;
1382+
0% {
1383+
top: 0%;
1384+
opacity: 1;
13981385
}
1399-
75% {
1400-
transform: translate(-75%, 108px);
1401-
height: 12px;
1386+
100% {
1387+
top: 75%;
1388+
opacity: 0.2;
14021389
}
14031390
}
14041391

1405-
@keyframes rotate {
1406-
0%, 50%, 100% {
1407-
transform: rotate(0deg);
1408-
}
1409-
25% {
1410-
transform: rotate(90deg);
1392+
@keyframes kick {
1393+
0%, 75% {
1394+
height: 86px;
14111395
}
1412-
75% {
1413-
transform: rotate(-90deg);
1396+
100% {
1397+
height: 78px;
14141398
}
14151399
}
14161400

‎js/loaders/graph.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export const GRAPH = [
2-
32
{
43
id: "starLord-andro6e",
54
html: `<span class="loader"></span>`,
@@ -119,14 +118,14 @@ export const GRAPH = [
119118
position: absolute;
120119
width: 20px;
121120
height: 40px;
122-
border: 1px solid #fff;
121+
border: 1px solid #FF3D00;
123122
border-width: 12px 2px 7px;
124123
border-radius: 2px 2px 1px 1px;
125124
box-sizing: border-box;
126125
transform: rotate(45deg) translate(24px, -10px);
127-
background-image: linear-gradient(#FFF 20px, transparent 0),
128-
linear-gradient(#FFF 30px, transparent 0),
129-
linear-gradient(#FFF 30px, transparent 0);
126+
background-image: linear-gradient(#FF3D00 20px, transparent 0),
127+
linear-gradient(#FF3D00 30px, transparent 0),
128+
linear-gradient(#FF3D00 30px, transparent 0);
130129
background-size: 10px 12px , 1px 30px, 1px 30px;
131130
background-repeat: no-repeat;
132131
background-position: center , 12px 0px , 3px 0px;

‎js/loaders/objects.js

Lines changed: 203 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1477,7 +1477,66 @@ export const OBJECTS = [
14771477
}
14781478
}
14791479
`,
1480-
}, {
1480+
},
1481+
1482+
1483+
{
1484+
id: "anbeLighup",
1485+
html: `<span class="loader"></span>`,
1486+
css: `.loader {
1487+
width: 4px;
1488+
height: 86px;
1489+
background: #fff;
1490+
margin: auto;
1491+
position: relative;
1492+
animation: shake 1s linear infinite alternate,
1493+
lightup 1s linear infinite;
1494+
transform-origin: 0 0;
1495+
}
1496+
1497+
.loader::before {
1498+
content: '';
1499+
position: absolute;
1500+
left: 50%;
1501+
top: 100%;
1502+
transform: translateX(-50%);
1503+
width: 32px;
1504+
height: 16px;
1505+
box-sizing:border-box;
1506+
border: 5px solid #FF3D00;
1507+
border-top: none;
1508+
border-radius: 0 0 20px 20px;
1509+
}
1510+
.loader::after {
1511+
content: '';
1512+
left: 50%;
1513+
bottom: 0;
1514+
position: absolute;
1515+
transform: translateX(-50%);
1516+
width: 64px;
1517+
height: 32px;
1518+
border-radius: 50px 50px 0 0;
1519+
background: #fff;
1520+
}
1521+
1522+
@keyframes shake {
1523+
0% { transform: rotate(10deg) }
1524+
100% { transform: rotate(-10deg) }
1525+
}
1526+
@keyframes lightup {
1527+
0% ,20% , 40% {
1528+
opacity: 0
1529+
}
1530+
10%, 30% , 50% , 100% {
1531+
opacity: 1
1532+
}
1533+
}
1534+
`
1535+
},
1536+
1537+
1538+
1539+
{
14811540
id: "2hmjm05ufjc",
14821541
html: `<span class="loader"></span>`,
14831542
css: `.loader {
@@ -1698,6 +1757,149 @@ export const OBJECTS = [
16981757
}
16991758
`,
17001759
},
1760+
1761+
{
1762+
id: "mouseScrDwn",
1763+
html: `<span class="loader"></span>`,
1764+
css: `.loader {
1765+
width: 48px;
1766+
height: 78px;
1767+
box-sizing: border-box;
1768+
border: 2px solid #fff;
1769+
position: relative;
1770+
border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
1771+
}
1772+
1773+
.loader::before {
1774+
content: '';
1775+
position: absolute;
1776+
left: 50%;
1777+
top: 0;
1778+
transform: translate(-50% , 50%);
1779+
width: 10px;
1780+
height: 10px;
1781+
background: #FFF;
1782+
border-radius: 50%;
1783+
animation: fadeDown 1s ease-out infinite;
1784+
}
1785+
1786+
@keyframes fadeDown {
1787+
0% {
1788+
top: 0%;
1789+
opacity: 1;
1790+
}
1791+
100% {
1792+
top: 60%;
1793+
opacity: 0;
1794+
}
1795+
}
1796+
`,
1797+
},
1798+
{
1799+
id: "mouseLnScrDwn",
1800+
html: `<span class="loader"></span>`,
1801+
css: `.loader {
1802+
width: 48px;
1803+
height: 78px;
1804+
position: relative;
1805+
box-sizing: border-box;
1806+
border: 2px solid #fff;
1807+
margin: auto;
1808+
border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
1809+
}
1810+
.loader::before {
1811+
content: "";
1812+
position: absolute;
1813+
left: 50%;
1814+
top: 20px;
1815+
transform: translateX(-50%);
1816+
width: 4px;
1817+
height: 4px;
1818+
background: #fff;
1819+
border-radius: 10px;
1820+
animation: scrollDown 1.5s linear infinite;
1821+
}
1822+
@keyframes scrollDown {
1823+
0% {
1824+
top: 15px;
1825+
height: 4px;
1826+
opacity: 1;
1827+
}
1828+
33% {
1829+
top: 15px;
1830+
height: 40px;
1831+
}
1832+
66% {
1833+
top: 50px;
1834+
height: 10px;
1835+
opacity: 1;
1836+
}
1837+
100% {
1838+
top: 56px;
1839+
height: 4px;
1840+
opacity: 0;
1841+
}
1842+
}
1843+
`,
1844+
},
1845+
{
1846+
id: "mouseBallBounce",
1847+
html: `<span class="loader"></span>`,
1848+
css: `.loader {
1849+
width: 48px;
1850+
height: 86px;
1851+
position: relative;
1852+
}
1853+
1854+
.loader::before {
1855+
content: '';
1856+
position: absolute;
1857+
left: 50%;
1858+
top: 0;
1859+
transform: translate(-50% , 50%);
1860+
width: 10px;
1861+
height: 10px;
1862+
background: #FFF;
1863+
border-radius: 50%;
1864+
animation: bounce 1s ease-in infinite alternate;
1865+
}
1866+
.loader::after {
1867+
content: '';
1868+
left: 0;
1869+
top: 0;
1870+
position: absolute;
1871+
width: 48px;
1872+
height: 86px;
1873+
box-sizing: border-box;
1874+
border: 2px solid #fff;
1875+
border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
1876+
animation: kick 1s ease-in infinite alternate;
1877+
}
1878+
1879+
@keyframes bounce {
1880+
0% {
1881+
top: 0%;
1882+
opacity: 1;
1883+
}
1884+
100% {
1885+
top: 75%;
1886+
opacity: 0.2;
1887+
}
1888+
}
1889+
@keyframes kick {
1890+
0% , 75% {
1891+
height: 86px
1892+
}
1893+
100% {
1894+
height: 78px
1895+
}
1896+
}
1897+
`,
1898+
},
1899+
1900+
1901+
1902+
17011903
{
17021904
id: "8fzm1l50fw4",
17031905
html: `<span class="loader"></span>`,

0 commit comments

Comments
 (0)