Skip to content

Commit 7cb3e0f

Browse files
reflecthubreflecthub
authored
Update index.css
1 parent 8efe915 commit 7cb3e0f

1 file changed

Lines changed: 188 additions & 0 deletions

File tree

‎index.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1713,3 +1713,191 @@ display: none; /* Hide tabs on small screens */
17131713
border-radius: 10px;
17141714
margin-top: 0px !important;
17151715
}
1716+
.apple-loader-container {
1717+
width: 200px;
1718+
height: 200px;
1719+
position: relative;
1720+
1721+
/* You can adjust these dimensions as needed */
1722+
}
1723+
1724+
.apple-loader {
1725+
width: 100%;
1726+
height: 100%;
1727+
display: flex;
1728+
align-items: center;
1729+
justify-content: center;
1730+
animation: donwAnimation 0.75s infinite;
1731+
scale: 0.6;
1732+
margin: 0px;
1733+
position: relative;
1734+
}
1735+
1736+
.watch, .pc {
1737+
width: 100%;
1738+
height: 100%;
1739+
display: flex;
1740+
align-items: center;
1741+
justify-content: center;
1742+
position: absolute;
1743+
top: 0;
1744+
left: 0;
1745+
}
1746+
1747+
.pc {
1748+
transform: translateY(-20px);
1749+
animation: pcAnimation 3s infinite;
1750+
}
1751+
1752+
.inner-sq {
1753+
width: 40px;
1754+
height: 115px;
1755+
border: 10px solid #e3e4e8;
1756+
border-radius: 12px;
1757+
background: #283329;
1758+
animation: hideWatch 3s infinite;
1759+
position: absolute;
1760+
}
1761+
1762+
.outer-sq {
1763+
width: 60px;
1764+
height: 60px;
1765+
border: 10px solid #e3e4e8;
1766+
border-radius: 12px;
1767+
background: #283329;
1768+
animation: watchAnimation 3s infinite;
1769+
position: absolute;
1770+
}
1771+
1772+
.circle {
1773+
background: #e3e4e8;
1774+
width: 10px;
1775+
height: 30px;
1776+
transform: translate(50px);
1777+
border-radius: 12px;
1778+
animation: watchCircle 3s infinite;
1779+
position: absolute;
1780+
}
1781+
1782+
.base-one {
1783+
background: #e3e4e8;
1784+
width: 10px;
1785+
height: 30px;
1786+
transform: translateY(80px);
1787+
position: absolute;
1788+
}
1789+
1790+
.base-two {
1791+
background: #e3e4e8;
1792+
width: 90px;
1793+
height: 10px;
1794+
transform: translateY(95px);
1795+
border-radius: 12px;
1796+
position: absolute;
1797+
}
1798+
1799+
.ipad {
1800+
height: 100%;
1801+
width: 100%;
1802+
display: flex;
1803+
align-items: center;
1804+
justify-content: center;
1805+
position: absolute;
1806+
top: 0;
1807+
left: 0;
1808+
}
1809+
1810+
.line {
1811+
background: #e3e4e8;
1812+
width: 43px;
1813+
height: 8px;
1814+
z-index: 2;
1815+
border-radius: 12px;
1816+
transform: translateY(40px);
1817+
animation: ipad 3s infinite;
1818+
position: absolute;
1819+
}
1820+
1821+
@keyframes donwAnimation {
1822+
20% {
1823+
transform: translateY(15px);
1824+
animation-timing-function: ease-out;
1825+
}
1826+
100% {
1827+
transform: translateY(-15px);
1828+
}
1829+
}
1830+
1831+
@keyframes watchAnimation {
1832+
0% {
1833+
width: 70px;
1834+
height: 130px;
1835+
}
1836+
25% {
1837+
width: 60px;
1838+
height: 60px;
1839+
}
1840+
50%, 75% {
1841+
width: 163px;
1842+
height: 103px;
1843+
}
1844+
100% {
1845+
width: 70px;
1846+
height: 130px;
1847+
}
1848+
}
1849+
1850+
@keyframes hideWatch {
1851+
0%, 25% {
1852+
scale: 1;
1853+
opacity: 1;
1854+
}
1855+
50%, 100% {
1856+
opacity: 0;
1857+
scale: 0;
1858+
}
1859+
}
1860+
1861+
@keyframes watchCircle {
1862+
0% {
1863+
transform: translate(20px);
1864+
opacity: 1;
1865+
}
1866+
25% {
1867+
opacity: 1;
1868+
transform: translate(50px);
1869+
}
1870+
26%, 100% {
1871+
opacity: 0;
1872+
transform: translate(20px);
1873+
}
1874+
}
1875+
1876+
@keyframes pcAnimation {
1877+
0%, 25% {
1878+
visibility: hidden;
1879+
}
1880+
50% {
1881+
transform: translateY(-20px);
1882+
}
1883+
51%, 55%, 75%, 100% {
1884+
scale: 1;
1885+
transform: translateY(-40px);
1886+
}
1887+
}
1888+
1889+
@keyframes ipad {
1890+
0%, 50% {
1891+
transform: translateY(55px);
1892+
opacity: 0;
1893+
}
1894+
75% {
1895+
opacity: 1;
1896+
transform: translateY(40px);
1897+
width: 43px;
1898+
}
1899+
100% {
1900+
width: 9px;
1901+
transform: translateY(55px);
1902+
}
1903+
}

0 commit comments

Comments
 (0)