diff --git a/Art/spinner/index.html b/Art/spinner/index.html new file mode 100644 index 000000000..edf78d8a4 --- /dev/null +++ b/Art/spinner/index.html @@ -0,0 +1,14 @@ + + + + + +Loading Spinner Animation + + + +
+
+
+ + diff --git a/Art/spinner/spinner.gif b/Art/spinner/spinner.gif new file mode 100644 index 000000000..1c4e7f969 Binary files /dev/null and b/Art/spinner/spinner.gif differ diff --git a/Art/spinner/styles.css b/Art/spinner/styles.css new file mode 100644 index 000000000..6809c0515 --- /dev/null +++ b/Art/spinner/styles.css @@ -0,0 +1,28 @@ +.background { + background-color: #f2f2f2; + background-image: + linear-gradient(45deg, #dddddd 25%, transparent 25%, transparent 75%, #dddddd 75%, #dddddd), + linear-gradient(45deg, #dddddd 25%, transparent 25%, transparent 75%, #dddddd 75%, #dddddd); + background-size: 20px 20px; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + + .spinner { + width: 50px; + height: 50px; + border: 5px solid rgba(0, 0, 0, 0.1); + border-left-color: #333; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: auto; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + \ No newline at end of file diff --git a/include.js b/include.js index 5fec8e863..2fcf39e25 100644 --- a/include.js +++ b/include.js @@ -2903,6 +2903,13 @@ let cards = [ author: 'Kalliran', githubLink: 'https://github.com/Kalliran' }, + { + artName: 'Animatron', + pageLink: './Art/spinner/index.html', + imageLink: './Art/spinner/spinner.gif', + author: 'Ian', + githubLink: 'https://github.com/Ianpack' + }, ]; /* -------------------------------------------------------------------------- */