diff --git a/changelog.js b/changelog.js
index a72a8da..24ad800 100644
--- a/changelog.js
+++ b/changelog.js
@@ -323,6 +323,8 @@ function dateFormatting(date) {
 
 // main app function. sorts all commits received by getCommits() function based on user's options.
 async function sortCommits() {
+  document.getElementById("loader").innerHTML = "<center><img src='./loading.svg'></img></center>";
+
   let urlField = document.getElementById("urlhtml").value.toString();
   // if is a url converts it to something usable
   if (urlField.match(new RegExp(`(\\.com\\/)(.*)`, 'i'))) {
@@ -342,11 +344,12 @@ async function sortCommits() {
   const others = [];
   const othersRaw = [];
 
+  
+
   if (urlField === "" || apiField === "") {
     alert("Both URL and API token need to be inputted")
+    document.getElementById("loader").innerHTML = '';
   } else {
-    document.getElementById("loader").innerHTML = "<center><img src='https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/source.gif'></img></center>";
-
     // \s all special characters in a string in order to input that into a regex
     function quotemeta(str) {
       return (str + '').replace(/([\.\\\+\*\?\[\^\]\$\(\)])/g, '\\$1');
diff --git a/index.html b/index.html
index d6866e3..e5d50f3 100644
--- a/index.html
+++ b/index.html
@@ -327,12 +327,12 @@ <h4>Custom keyword list 2</h4>
         <button onclick="copyToClipboard()">📋 Copy MarkDown to clipboard</button>
       </center>
       <base target="_blank">
+        <div id="loader"></div>        
         <div id="bodyhtml"></div>
       </base>
     </div>
   </div>
   </div>
-  <div id="loader"></div>
   <hr>
   <footer>
     <i>
diff --git a/loading.svg b/loading.svg
new file mode 100644
index 0000000..15d34e3
--- /dev/null
+++ b/loading.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="394px" height="394px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="translate(50 50)">
+  <g transform="scale(0.32)">
+    <g transform="translate(-50 -50)">
+      <g>
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.32894736842105265s"></animateTransform>
+        <path fill-opacity="0.58" fill="#e15b64" d="M50 50L50 0A50 50 0 0 1 100 50Z"></path>
+      </g>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.43859649122807015s"></animateTransform>
+        <path fill-opacity="0.58" fill="#f47e60" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(90 50 50)"></path>
+      </g>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.6578947368421053s"></animateTransform>
+        <path fill-opacity="0.58" fill="#f8b26a" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(180 50 50)"></path>
+      </g>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.3157894736842106s"></animateTransform>
+        <path fill-opacity="0.58" fill="#abbd81" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(270 50 50)"></path>
+      </g>
+    </g>
+  </g>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index b128d5a..b464beb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "changelog-maker",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "description": "Changelog maker. Takes commit messages and generates a gitlog.",
   "main": "index.js",
   "scripts": {