diff --git a/Art/loading/index.html b/Art/loading/index.html new file mode 100644 index 000000000..a941976d6 --- /dev/null +++ b/Art/loading/index.html @@ -0,0 +1,20 @@ + + + + + + loading + + + + + + \ No newline at end of file diff --git a/Art/loading/loading.gif b/Art/loading/loading.gif new file mode 100644 index 000000000..5138efdb4 Binary files /dev/null and b/Art/loading/loading.gif differ diff --git a/Art/loading/style.css b/Art/loading/style.css new file mode 100644 index 000000000..7f4b06b8f --- /dev/null +++ b/Art/loading/style.css @@ -0,0 +1,68 @@ +body{ + margin: 0; + padding: 0; + background: #262626; +} +ul{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + padding: 0; + display: flex; +} +ul li{ + list-style: none; + color: #484848; + font-family: arial; + font-size: 5em; + letter-spacing: 15px; + animation: animate 1.4s linear infinite; +} +@keyframes animate +{ + 0% + { + color: #484848; + text-shadow: none; + } + 90% + { + color: #484848; + text-shadow: none; + } + 100% + { + color: #fff900; + text-shadow: 0 0 7px #fff900, 0 0 50px #fff6c00; + } +} +ul li:nth-child(1) +{ + animation-delay: .2s; +} +ul li:nth-child(2) +{ + animation-delay: .4s; +} +ul li:nth-child(3) +{ + animation-delay: .6s; +} +ul li:nth-child(4) +{ + animation-delay: .8s; +} +ul li:nth-child(5) +{ + animation-delay: 1s; +} +ul li:nth-child(6) +{ + animation-delay: 1.2s; +} +ul li:nth-child(7) +{ + animation-delay: 1.4s; +} \ No newline at end of file diff --git a/include.js b/include.js index 5fec8e863..2cf071ba0 100644 --- a/include.js +++ b/include.js @@ -2903,6 +2903,13 @@ let cards = [ author: 'Kalliran', githubLink: 'https://github.com/Kalliran' }, + { + artName: 'Loading Animation', + pageLink: './Art/loading/index.html', + imageLink: './Art/loading/loading.gif', + author: 'Ato186', + githubLink: 'https://github.com/Ato186' + }, ]; /* -------------------------------------------------------------------------- */