diff --git a/Art/loader/index.html b/Art/loader/index.html new file mode 100644 index 000000000..744a4cf40 --- /dev/null +++ b/Art/loader/index.html @@ -0,0 +1,36 @@ + + + + + + Loader + + + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/Art/loader/loader.png b/Art/loader/loader.png new file mode 100644 index 000000000..092cd3cd9 Binary files /dev/null and b/Art/loader/loader.png differ diff --git a/Art/loader/style.css b/Art/loader/style.css new file mode 100644 index 000000000..59c4dac68 --- /dev/null +++ b/Art/loader/style.css @@ -0,0 +1,68 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +section{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #042104; + animation: animateBg 10s linear infinite; +} +@keyframes animateBg{ + 0%{ + filter: hue-rotate(0deg); + } + 100%{ + filter: hue-rotate(360deg); + } +} + +section .loader{ + position: relative; + width: 120px; + height: 120px; +} + +section .loader span{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: rotate(calc(18deg * var(--i))); +} + +section .loader span::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 15px; + height: 15px; + border-radius: 50%; + background: #00ff0a; + box-shadow: 0 0 10px #00ff0a, + 0 0 20px #00ff0a, + 0 0 30px #00ff0a, + 0 0 40px #00ff0a, + 0 0 50px #00ff0a, + 0 0 60px #00ff0a, + 0 0 70px #00ff0a, + 0 0 80px #00ff0a, + 0 0 100px #00ff0a; + animation: animate 2s linear infinite; + animation-delay: calc(0.1s * var(--i)); +} + +@keyframes animate{ + 0%{ + transform: scale(1); + } + 80%, 100%{ + transform: scale(0); + } +} \ No newline at end of file diff --git a/include.js b/include.js index 5fec8e863..2511a28c0 100644 --- a/include.js +++ b/include.js @@ -2903,6 +2903,13 @@ let cards = [ author: 'Kalliran', githubLink: 'https://github.com/Kalliran' }, + { + artName: 'Loader', + pageLink: './Art/loader/index.html', + imageLink: './Art/loader/loader.png', + author: 'Fred', + githubLink: 'https://github.com/FredSampaio97' + }, ]; /* -------------------------------------------------------------------------- */