diff --git a/.gitignore b/.gitignore
index 7e9c2cb..31af83f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,6 @@ lib-cov
 pids
 logs
 results
-
+dist
 npm-debug.log
-node_modules
\ No newline at end of file
+node_modules
diff --git a/index.d.ts b/index.d.ts
index ead7eb9..4e484a7 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,23 +1,39 @@
-export interface BarColors {
-  [key: string]: string
+type TopBarOptions = {
+    container?: HTMLElement;
+    autoRun?: boolean;
+    barThickness?: number;
+    barColors?: Record<string, string>;
+    shadowBlur?: number;
+    showShadow?: boolean;
+    shadowColor?: string;
+    className?: string;
+};
+declare class Topbar {
+    private container;
+    private canvas;
+    private progressTimerId;
+    private autoRun;
+    private showing;
+    private currentProgress;
+    private barThickness;
+    private barColors;
+    private shadowBlur;
+    private shadowColor;
+    private className;
+    private fadeTimerId;
+    private delayTimerId;
+    constructor({ container, autoRun, barThickness, barColors, shadowBlur, shadowColor, className, }?: Partial<TopBarOptions>);
+    show(delay?: number): void;
+    hide(): void;
+    progress(to?: number | string): number;
+    private hideLoop;
+    private loopShow;
+    private createCanvas;
+    private repaint;
 }
+declare function config(options: Partial<TopBarOptions>): Topbar;
+declare function show(delay?: number): void;
+declare function hide(): void;
+declare function progress(to?: number | string): number;
 
-export interface TopbarConfigOptions {
-  autoRun?: boolean
-  barThickness?: number
-  barColors?: BarColors
-  shadowBlur?: number
-  shadowColor?: string
-  className?: string
-}
-
-export interface Topbar {
-  config: (options: TopbarConfigOptions) => void
-  show: (delay?: number) => void
-  progress: (to?: number | string) => number
-  hide: () => void
-}
-
-declare const topbar: Topbar
-
-export default topbar
+export { type TopBarOptions, Topbar, config, hide, progress, show };
diff --git a/index.html b/index.html
index edd5fc3..dce38b0 100644
--- a/index.html
+++ b/index.html
@@ -65,7 +65,7 @@
           $('#btnStartAdvanced').click(function() {
             resetToDefaults()
             topbar.config({
-              autoRun      : false, 
+              autoRun      : false,
               barThickness : 5,
               barColors    : {
                   '0'      : 'rgba(26,  188, 156, .7)',
@@ -77,13 +77,13 @@
             })
             topbar.show();
             (function step() {
-              setTimeout(function() {  
+              setTimeout(function() {
                 if (topbar.progress('+.01') < 1) step()
               }, 16)
             })()
           })
           $('#btnStopAdvanced').click(function() {
-            topbar.hide()  
+            topbar.hide()
           })
       })
     </script>
@@ -166,7 +166,7 @@ <h4>Advanced</h4>
             <pre class="prettyprint">
 $('#btnStartAdvanced').click(function() {
   topbar.config({
-    autoRun      : false, 
+    autoRun      : false,
     barThickness : 5,
     barColors    : {
       '0'        : 'rgba(26,  188, 156, .7)',
@@ -179,7 +179,7 @@ <h4>Advanced</h4>
   })
   topbar.show();
   (function step() {
-    setTimeout(function() {  
+    setTimeout(function() {
       if (topbar.progress('+.01') &lt; 1) step()
     }, 16)
   })()
diff --git a/package-lock.json b/package-lock.json
index 3c8ace6..c698333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,714 @@
       "version": "3.0.0",
       "license": "MIT",
       "devDependencies": {
-        "uglify-js": "~3.12.4"
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^12.1.1",
+        "rollup": "^4.24.3",
+        "rollup-plugin-dts": "^6.1.1",
+        "tslib": "^2.8.1",
+        "typescript": "^5.6.3"
       }
     },
-    "node_modules/uglify-js": {
-      "version": "3.12.4",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.4.tgz",
-      "integrity": "sha512-L5i5jg/SHkEqzN18gQMTWsZk3KelRsfD1wUVNqtq0kzqWQqcJjyL8yc1o8hJgRrWqrAl2mUFbhfznEIoi7zi2A==",
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "dev": true,
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-12.1.1.tgz",
+      "integrity": "sha512-t7O653DpfB5MbFrqPe/VcKFFkvRuFNp9qId3xq4Eth5xlyymzxNpye2z8Hrl0RIMuXTSr5GGcFpkdlMeacUiFQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0||^3.0.0||^4.0.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz",
+      "integrity": "sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.3.tgz",
+      "integrity": "sha512-iAHpft/eQk9vkWIV5t22V77d90CRofgR2006UiCjHcHJFVI1E0oBkQIAbz+pLtthFw3hWEmVB4ilxGyBf48i2Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.3.tgz",
+      "integrity": "sha512-QPW2YmkWLlvqmOa2OwrfqLJqkHm7kJCIMq9kOz40Zo9Ipi40kf9ONG5Sz76zszrmIZZ4hgRIkez69YnTHgEz1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.3.tgz",
+      "integrity": "sha512-KO0pN5x3+uZm1ZXeIfDqwcvnQ9UEGN8JX5ufhmgH5Lz4ujjZMAnxQygZAVGemFWn+ZZC0FQopruV4lqmGMshow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.3.tgz",
+      "integrity": "sha512-CsC+ZdIiZCZbBI+aRlWpYJMSWvVssPuWqrDy/zi9YfnatKKSLFCe6fjna1grHuo/nVaHG+kiglpRhyBQYRTK4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.3.tgz",
+      "integrity": "sha512-F0nqiLThcfKvRQhZEzMIXOQG4EeX61im61VYL1jo4eBxv4aZRmpin6crnBJQ/nWnCsjH5F6J3W6Stdm0mBNqBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.3.tgz",
+      "integrity": "sha512-KRSFHyE/RdxQ1CSeOIBVIAxStFC/hnBgVcaiCkQaVC+EYDtTe4X7z5tBkFyRoBgUGtB6Xg6t9t2kulnX6wJc6A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.3.tgz",
+      "integrity": "sha512-h6Q8MT+e05zP5BxEKz0vi0DhthLdrNEnspdLzkoFqGwnmOzakEHSlXfVyA4HJ322QtFy7biUAVFPvIDEDQa6rw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.3.tgz",
+      "integrity": "sha512-fKElSyXhXIJ9pqiYRqisfirIo2Z5pTTve5K438URf08fsypXrEkVmShkSfM8GJ1aUyvjakT+fn2W7Czlpd/0FQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.3.tgz",
+      "integrity": "sha512-YlddZSUk8G0px9/+V9PVilVDC6ydMz7WquxozToozSnfFK6wa6ne1ATUjUvjin09jp34p84milxlY5ikueoenw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.3.tgz",
+      "integrity": "sha512-yNaWw+GAO8JjVx3s3cMeG5Esz1cKVzz8PkTJSfYzE5u7A+NvGmbVFEHP+BikTIyYWuz0+DX9kaA3pH9Sqxp69g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.3.tgz",
+      "integrity": "sha512-lWKNQfsbpv14ZCtM/HkjCTm4oWTKTfxPmr7iPfp3AHSqyoTz5AgLemYkWLwOBWc+XxBbrU9SCokZP0WlBZM9lA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.3.tgz",
+      "integrity": "sha512-HoojGXTC2CgCcq0Woc/dn12wQUlkNyfH0I1ABK4Ni9YXyFQa86Fkt2Q0nqgLfbhkyfQ6003i3qQk9pLh/SpAYw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.3.tgz",
+      "integrity": "sha512-mnEOh4iE4USSccBOtcrjF5nj+5/zm6NcNhbSEfR3Ot0pxBwvEn5QVUXcuOwwPkapDtGZ6pT02xLoPaNv06w7KQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.3.tgz",
+      "integrity": "sha512-rMTzawBPimBQkG9NKpNHvquIUTQPzrnPxPbCY1Xt+mFkW7pshvyIS5kYgcf74goxXOQk0CP3EoOC1zcEezKXhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.3.tgz",
+      "integrity": "sha512-2lg1CE305xNvnH3SyiKwPVsTVLCg4TmNCF1z7PSHX2uZY2VbUpdkgAllVoISD7JO7zu+YynpWNSKAtOrX3AiuA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.3.tgz",
+      "integrity": "sha512-9SjYp1sPyxJsPWuhOCX6F4jUMXGbVVd5obVpoVEi8ClZqo52ViZewA6eFz85y8ezuOA+uJMP5A5zo6Oz4S5rVQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.3.tgz",
+      "integrity": "sha512-HGZgRFFYrMrP3TJlq58nR1xy8zHKId25vhmm5S9jETEfDf6xybPxsavFTJaufe2zgOGYJBskGlj49CwtEuFhWQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true
+    },
+    "node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.3.tgz",
+      "integrity": "sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.6"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.24.3",
+        "@rollup/rollup-android-arm64": "4.24.3",
+        "@rollup/rollup-darwin-arm64": "4.24.3",
+        "@rollup/rollup-darwin-x64": "4.24.3",
+        "@rollup/rollup-freebsd-arm64": "4.24.3",
+        "@rollup/rollup-freebsd-x64": "4.24.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.3",
+        "@rollup/rollup-linux-arm64-musl": "4.24.3",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.3",
+        "@rollup/rollup-linux-x64-gnu": "4.24.3",
+        "@rollup/rollup-linux-x64-musl": "4.24.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.3",
+        "@rollup/rollup-win32-x64-msvc": "4.24.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-dts": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-6.1.1.tgz",
+      "integrity": "sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.10"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Swatinem"
+      },
+      "optionalDependencies": {
+        "@babel/code-frame": "^7.24.2"
+      },
+      "peerDependencies": {
+        "rollup": "^3.29.4 || ^4",
+        "typescript": "^4.5 || ^5.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
+      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+      "dev": true
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz",
+      "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "bin": {
-        "uglifyjs": "bin/uglifyjs"
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=14.17"
       }
     }
   }
diff --git a/package.json b/package.json
index 7af3708..bbfe5c9 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "topbar",
-  "main": "topbar.min.js",
   "files": [
     "topbar.js",
     "topbar.min.js",
-    "*.d.ts"
+    "*.d.ts",
+    "dist"
   ],
   "version": "3.0.0",
   "description": "Tiny & beautiful site-wide progress indicator",
@@ -14,7 +14,8 @@
     "url": "git@github.com:buunguyen/topbar.git"
   },
   "scripts": {
-    "build": "uglifyjs --comments -c -o topbar.min.js topbar.js"
+    "dev": "rollup -w -c ./rollup.config.mjs",
+    "build": "NODE_ENV=production rollup -c ./rollup.config.mjs"
   },
   "keywords": [
     "progress",
@@ -27,7 +28,29 @@
   "author": {
     "name": "Buu Nguyen"
   },
+  "main": "topbar.min.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "types": {
+    "index.d.ts": "./dist/index.d.ts"
+  },
   "devDependencies": {
-    "uglify-js": "~3.12.4"
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "rollup": "^4.24.3",
+    "rollup-plugin-dts": "^6.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
   }
-}
\ No newline at end of file
+}
diff --git a/rollup.config.mjs b/rollup.config.mjs
new file mode 100644
index 0000000..b3f8890
--- /dev/null
+++ b/rollup.config.mjs
@@ -0,0 +1,54 @@
+import typescript from "@rollup/plugin-typescript";
+import terser from "@rollup/plugin-terser";
+import { dts } from "rollup-plugin-dts";
+
+const config = [
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.js",
+      format: "es",
+      sourcemap: true,
+    },
+    plugins: [typescript()],
+  },
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.cjs",
+      format: "cjs",
+      sourcemap: true,
+    },
+    plugins: [typescript({ importHelpers: false })],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: "dist/index.d.ts", format: "es" }],
+    plugins: [dts()],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: "index.d.ts", format: "es" }],
+    plugins: [dts()],
+  },
+  {
+    input: "src/index.ts",
+    output: {
+      name: "topbar",
+      file: "topbar.js",
+      format: "iife",
+    },
+    plugins: [typescript({ outDir: "." })],
+  },
+  {
+    input: "src/index.ts",
+    output: {
+      name: "topbar",
+      file: "topbar.min.js",
+      format: "iife",
+    },
+    plugins: [typescript({ outDir: "." }), terser()],
+  },
+];
+
+export default config;
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..ec9ee47
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,217 @@
+/*
+ * @license MIT
+ * topbar 3.0.0
+ * http://buunguyen.github.io/topbar
+ * Copyright (c) 2024 Buu Nguyen
+ */
+
+const DEFAULT_BAR_COLORS = {
+  0: "rgba(26,  188, 156, .9)",
+  ".25": "rgba(52,  152, 219, .9)",
+  ".50": "rgba(241, 196, 15,  .9)",
+  ".75": "rgba(230, 126, 34,  .9)",
+  "1.0": "rgba(211, 84,  0,   .9)",
+};
+
+export type TopBarOptions = {
+  container?: HTMLElement;
+  autoRun?: boolean;
+  barThickness?: number;
+  barColors?: Record<string, string>;
+  shadowBlur?: number;
+  showShadow?: boolean;
+  shadowColor?: string;
+  className?: string;
+};
+
+export class Topbar {
+  private container: HTMLElement;
+  private canvas: HTMLCanvasElement | undefined;
+  private progressTimerId: number | null = null;
+  private autoRun: boolean;
+  private showing: boolean;
+  private currentProgress: number;
+  private barThickness: number;
+  private barColors: Record<string, string>;
+  private shadowBlur: number;
+  private shadowColor: string;
+  private className: string | undefined;
+  private fadeTimerId: number | null = null;
+  private delayTimerId: number | null = null;
+
+  constructor({
+    container,
+    autoRun,
+    barThickness,
+    barColors,
+    shadowBlur,
+    shadowColor,
+    className,
+  }: Partial<TopBarOptions> = {}) {
+    this.container = container || document.body;
+    this.autoRun = autoRun || true;
+    this.shadowBlur = shadowBlur || 10;
+    this.shadowColor = shadowColor || "rgba(0, 0, 0, .6)";
+    this.barThickness = barThickness || 3;
+    this.showing = false;
+    this.currentProgress = 0;
+    this.barColors = barColors || DEFAULT_BAR_COLORS;
+    this.className = className;
+  }
+
+  show(delay?: number) {
+    if (this.showing) return;
+
+    if (delay) {
+      if (this.delayTimerId) return;
+      this.delayTimerId = window.setTimeout(() => this.show(), delay);
+    } else {
+      this.showing = true;
+
+      if (this.fadeTimerId !== null)
+        window.cancelAnimationFrame(this.fadeTimerId);
+
+      if (!this.canvas) {
+        this.createCanvas();
+      }
+
+      if (!this.canvas!.parentElement) {
+        this.container.appendChild(this.canvas!);
+      }
+
+      this.canvas!.style.opacity = "1";
+      this.canvas!.style.display = "block";
+      this.progress(0);
+
+      if (this.autoRun) {
+        this.loopShow();
+      }
+    }
+  }
+
+  hide() {
+    clearTimeout(this.delayTimerId!);
+    this.delayTimerId = null;
+    if (!this.showing) return;
+
+    this.showing = false;
+
+    if (this.progressTimerId != null) {
+      window.cancelAnimationFrame(this.progressTimerId);
+      this.progressTimerId = null;
+    }
+
+    this.hideLoop();
+  }
+
+  progress(to?: number | string) {
+    if (typeof to === "undefined") return this.currentProgress;
+    if (typeof to === "string") {
+      const progressStarted = to.indexOf("+") >= 0 || to.indexOf("-") >= 0;
+      to = (progressStarted ? this.currentProgress : 0) + parseFloat(to);
+    }
+
+    this.currentProgress = to > 1 ? 1 : to;
+    this.repaint();
+    return this.currentProgress;
+  }
+
+  private hideLoop() {
+    if (this.progress("+.1") >= 1 && this.canvas) {
+      const opacity = parseFloat(this.canvas.style.opacity) - 0.05;
+      this.canvas.style.opacity = opacity.toString();
+
+      if (parseFloat(this.canvas.style.opacity) <= 0.05) {
+        this.canvas.style.display = "none";
+        this.fadeTimerId = null;
+        return;
+      }
+    }
+
+    this.fadeTimerId = window.requestAnimationFrame(this.hideLoop.bind(this));
+  }
+
+  private loopShow() {
+    this.progressTimerId = window.requestAnimationFrame(
+      this.loopShow.bind(this),
+    );
+    this.progress(
+      "+" + 0.05 * Math.pow(1 - Math.sqrt(this.currentProgress), 2),
+    );
+  }
+
+  private createCanvas() {
+    this.canvas = document.createElement("canvas");
+    const style = this.canvas.style;
+
+    style.position = "fixed";
+    style.top = "0";
+    style.left = "0";
+    style.right = "0";
+    style.margin = "0";
+    style.padding = "0";
+    style.zIndex = "100001";
+    style.display = "none";
+
+    if (this.className) {
+      this.canvas.classList.add(this.className);
+    }
+
+    window.addEventListener("resize", this.repaint, false);
+  }
+
+  private repaint() {
+    if (!this.canvas) return;
+
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = this.barThickness * 5; // need space for shadow
+
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+
+    ctx.shadowBlur = this.shadowBlur;
+    ctx.shadowColor = this.shadowColor;
+
+    const lineGradient = ctx.createLinearGradient(0, 0, this.canvas.width, 0);
+
+    for (const stop in this.barColors) {
+      lineGradient.addColorStop(parseFloat(stop), this.barColors[stop]!);
+    }
+    ctx.lineWidth = this.barThickness;
+    ctx.beginPath();
+    ctx.moveTo(0, this.barThickness / 2);
+    ctx.lineTo(
+      Math.ceil(this.currentProgress * this.canvas.width),
+      this.barThickness / 2,
+    );
+    ctx.strokeStyle = lineGradient;
+    ctx.stroke();
+  }
+}
+
+let topbar: Topbar;
+export function config(options: Partial<TopBarOptions>) {
+  topbar = new Topbar(options);
+  return topbar;
+}
+
+export function show(delay?: number) {
+  if (!topbar) {
+    topbar = new Topbar();
+  }
+  topbar.show(delay);
+}
+
+export function hide() {
+  if (!topbar) {
+    topbar = new Topbar();
+  }
+  topbar.hide();
+}
+
+export function progress(to?: number | string) {
+  if (!topbar) {
+    topbar = new Topbar();
+  }
+  return topbar.progress(to);
+}
diff --git a/topbar.js b/topbar.js
index 0552337..341fe44 100644
--- a/topbar.js
+++ b/topbar.js
@@ -1,138 +1,177 @@
-/**
- * @license MIT
- * topbar 3.0.0
- * http://buunguyen.github.io/topbar
- * Copyright (c) 2024 Buu Nguyen
- */
-(function (window, document) {
-  "use strict";
+var topbar = (function (exports) {
+    'use strict';
 
-  var canvas,
-    currentProgress,
-    showing,
-    progressTimerId = null,
-    fadeTimerId = null,
-    delayTimerId = null,
-    addEvent = function (elem, type, handler) {
-      if (elem.addEventListener) elem.addEventListener(type, handler, false);
-      else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
-      else elem["on" + type] = handler;
-    },
-    options = {
-      autoRun: true,
-      barThickness: 3,
-      barColors: {
+    /*
+     * @license MIT
+     * topbar 3.0.0
+     * http://buunguyen.github.io/topbar
+     * Copyright (c) 2024 Buu Nguyen
+     */
+    const DEFAULT_BAR_COLORS = {
         0: "rgba(26,  188, 156, .9)",
         ".25": "rgba(52,  152, 219, .9)",
         ".50": "rgba(241, 196, 15,  .9)",
         ".75": "rgba(230, 126, 34,  .9)",
         "1.0": "rgba(211, 84,  0,   .9)",
-      },
-      shadowBlur: 10,
-      shadowColor: "rgba(0,   0,   0,   .6)",
-      className: null,
-    },
-    repaint = function () {
-      canvas.width = window.innerWidth;
-      canvas.height = options.barThickness * 5; // need space for shadow
-
-      var ctx = canvas.getContext("2d");
-      ctx.shadowBlur = options.shadowBlur;
-      ctx.shadowColor = options.shadowColor;
-
-      var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-      for (var stop in options.barColors)
-        lineGradient.addColorStop(stop, options.barColors[stop]);
-      ctx.lineWidth = options.barThickness;
-      ctx.beginPath();
-      ctx.moveTo(0, options.barThickness / 2);
-      ctx.lineTo(
-        Math.ceil(currentProgress * canvas.width),
-        options.barThickness / 2
-      );
-      ctx.strokeStyle = lineGradient;
-      ctx.stroke();
-    },
-    createCanvas = function () {
-      canvas = document.createElement("canvas");
-      var style = canvas.style;
-      style.position = "fixed";
-      style.top = style.left = style.right = style.margin = style.padding = 0;
-      style.zIndex = 100001;
-      style.display = "none";
-      if (options.className) canvas.classList.add(options.className);
-      addEvent(window, "resize", repaint);
-    },
-    topbar = {
-      config: function (opts) {
-        for (var key in opts)
-          if (options.hasOwnProperty(key)) options[key] = opts[key];
-      },
-      show: function (delay) {
-        if (showing) return;
-        if (delay) {
-          if (delayTimerId) return;
-          delayTimerId = setTimeout(() => topbar.show(), delay);
-        } else {
-          showing = true;
-          if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
-          if (!canvas) createCanvas();
-          if (!canvas.parentElement) document.body.appendChild(canvas);
-          canvas.style.opacity = 1;
-          canvas.style.display = "block";
-          topbar.progress(0);
-          if (options.autoRun) {
-            (function loop() {
-              progressTimerId = window.requestAnimationFrame(loop);
-              topbar.progress(
-                "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
-              );
-            })();
-          }
+    };
+    class Topbar {
+        container;
+        canvas;
+        progressTimerId = null;
+        autoRun;
+        showing;
+        currentProgress;
+        barThickness;
+        barColors;
+        shadowBlur;
+        shadowColor;
+        className;
+        fadeTimerId = null;
+        delayTimerId = null;
+        constructor({ container, autoRun, barThickness, barColors, shadowBlur, shadowColor, className, } = {}) {
+            this.container = container || document.body;
+            this.autoRun = autoRun || true;
+            this.shadowBlur = shadowBlur || 10;
+            this.shadowColor = shadowColor || "rgba(0, 0, 0, .6)";
+            this.barThickness = barThickness || 3;
+            this.showing = false;
+            this.currentProgress = 0;
+            this.barColors = barColors || DEFAULT_BAR_COLORS;
+            this.className = className;
         }
-      },
-      progress: function (to) {
-        if (typeof to === "undefined") return currentProgress;
-        if (typeof to === "string") {
-          to =
-            (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
-              ? currentProgress
-              : 0) + parseFloat(to);
+        show(delay) {
+            if (this.showing)
+                return;
+            if (delay) {
+                if (this.delayTimerId)
+                    return;
+                this.delayTimerId = window.setTimeout(() => this.show(), delay);
+            }
+            else {
+                this.showing = true;
+                if (this.fadeTimerId !== null)
+                    window.cancelAnimationFrame(this.fadeTimerId);
+                if (!this.canvas) {
+                    this.createCanvas();
+                }
+                if (!this.canvas.parentElement) {
+                    this.container.appendChild(this.canvas);
+                }
+                this.canvas.style.opacity = "1";
+                this.canvas.style.display = "block";
+                this.progress(0);
+                if (this.autoRun) {
+                    this.loopShow();
+                }
+            }
         }
-        currentProgress = to > 1 ? 1 : to;
-        repaint();
-        return currentProgress;
-      },
-      hide: function () {
-        clearTimeout(delayTimerId);
-        delayTimerId = null;
-        if (!showing) return;
-        showing = false;
-        if (progressTimerId != null) {
-          window.cancelAnimationFrame(progressTimerId);
-          progressTimerId = null;
+        hide() {
+            clearTimeout(this.delayTimerId);
+            this.delayTimerId = null;
+            if (!this.showing)
+                return;
+            this.showing = false;
+            if (this.progressTimerId != null) {
+                window.cancelAnimationFrame(this.progressTimerId);
+                this.progressTimerId = null;
+            }
+            this.hideLoop();
         }
-        (function loop() {
-          if (topbar.progress("+.1") >= 1) {
-            canvas.style.opacity -= 0.05;
-            if (canvas.style.opacity <= 0.05) {
-              canvas.style.display = "none";
-              fadeTimerId = null;
-              return;
+        progress(to) {
+            if (typeof to === "undefined")
+                return this.currentProgress;
+            if (typeof to === "string") {
+                const progressStarted = to.indexOf("+") >= 0 || to.indexOf("-") >= 0;
+                to = (progressStarted ? this.currentProgress : 0) + parseFloat(to);
             }
-          }
-          fadeTimerId = window.requestAnimationFrame(loop);
-        })();
-      },
-    };
+            this.currentProgress = to > 1 ? 1 : to;
+            this.repaint();
+            return this.currentProgress;
+        }
+        hideLoop() {
+            if (this.progress("+.1") >= 1 && this.canvas) {
+                const opacity = parseFloat(this.canvas.style.opacity) - 0.05;
+                this.canvas.style.opacity = opacity.toString();
+                if (parseFloat(this.canvas.style.opacity) <= 0.05) {
+                    this.canvas.style.display = "none";
+                    this.fadeTimerId = null;
+                    return;
+                }
+            }
+            this.fadeTimerId = window.requestAnimationFrame(this.hideLoop.bind(this));
+        }
+        loopShow() {
+            this.progressTimerId = window.requestAnimationFrame(this.loopShow.bind(this));
+            this.progress("+" + 0.05 * Math.pow(1 - Math.sqrt(this.currentProgress), 2));
+        }
+        createCanvas() {
+            this.canvas = document.createElement("canvas");
+            const style = this.canvas.style;
+            style.position = "fixed";
+            style.top = "0";
+            style.left = "0";
+            style.right = "0";
+            style.margin = "0";
+            style.padding = "0";
+            style.zIndex = "100001";
+            style.display = "none";
+            if (this.className) {
+                this.canvas.classList.add(this.className);
+            }
+            window.addEventListener("resize", this.repaint, false);
+        }
+        repaint() {
+            if (!this.canvas)
+                return;
+            this.canvas.width = window.innerWidth;
+            this.canvas.height = this.barThickness * 5; // need space for shadow
+            const ctx = this.canvas.getContext("2d");
+            if (!ctx)
+                return;
+            ctx.shadowBlur = this.shadowBlur;
+            ctx.shadowColor = this.shadowColor;
+            const lineGradient = ctx.createLinearGradient(0, 0, this.canvas.width, 0);
+            for (const stop in this.barColors) {
+                lineGradient.addColorStop(parseFloat(stop), this.barColors[stop]);
+            }
+            ctx.lineWidth = this.barThickness;
+            ctx.beginPath();
+            ctx.moveTo(0, this.barThickness / 2);
+            ctx.lineTo(Math.ceil(this.currentProgress * this.canvas.width), this.barThickness / 2);
+            ctx.strokeStyle = lineGradient;
+            ctx.stroke();
+        }
+    }
+    let topbar;
+    function config(options) {
+        topbar = new Topbar(options);
+        return topbar;
+    }
+    function show(delay) {
+        if (!topbar) {
+            topbar = new Topbar();
+        }
+        topbar.show(delay);
+    }
+    function hide() {
+        if (!topbar) {
+            topbar = new Topbar();
+        }
+        topbar.hide();
+    }
+    function progress(to) {
+        if (!topbar) {
+            topbar = new Topbar();
+        }
+        return topbar.progress(to);
+    }
+
+    exports.Topbar = Topbar;
+    exports.config = config;
+    exports.hide = hide;
+    exports.progress = progress;
+    exports.show = show;
+
+    return exports;
 
-  if (typeof module === "object" && typeof module.exports === "object") {
-    module.exports = topbar;
-  } else if (typeof define === "function" && define.amd) {
-    define(function () {
-      return topbar;
-    });
-  } else {
-    this.topbar = topbar;
-  }
-}.call(this, window, document));
+})({});
diff --git a/topbar.min.js b/topbar.min.js
index 96fd42e..0f29c1e 100644
--- a/topbar.min.js
+++ b/topbar.min.js
@@ -1,7 +1,7 @@
-/**
- * @license MIT
- * topbar 3.0.0
- * http://buunguyen.github.io/topbar
- * Copyright (c) 2024 Buu Nguyen
- */
-(function(window,document){"use strict";function repaint(){canvas.width=window.innerWidth,canvas.height=5*options.barThickness;var ctx=canvas.getContext("2d");ctx.shadowBlur=options.shadowBlur,ctx.shadowColor=options.shadowColor;var stop,lineGradient=ctx.createLinearGradient(0,0,canvas.width,0);for(stop in options.barColors)lineGradient.addColorStop(stop,options.barColors[stop]);ctx.lineWidth=options.barThickness,ctx.beginPath(),ctx.moveTo(0,options.barThickness/2),ctx.lineTo(Math.ceil(currentProgress*canvas.width),options.barThickness/2),ctx.strokeStyle=lineGradient,ctx.stroke()}var canvas,currentProgress,showing,progressTimerId=null,fadeTimerId=null,delayTimerId=null,options={autoRun:!0,barThickness:3,barColors:{0:"rgba(26,  188, 156, .9)",".25":"rgba(52,  152, 219, .9)",".50":"rgba(241, 196, 15,  .9)",".75":"rgba(230, 126, 34,  .9)","1.0":"rgba(211, 84,  0,   .9)"},shadowBlur:10,shadowColor:"rgba(0,   0,   0,   .6)",className:null},topbar={config:function(opts){for(var key in opts)options.hasOwnProperty(key)&&(options[key]=opts[key])},show:function(handler){var type,elem;showing||(handler?delayTimerId=delayTimerId||setTimeout(()=>topbar.show(),handler):(showing=!0,null!==fadeTimerId&&window.cancelAnimationFrame(fadeTimerId),canvas||((elem=(canvas=document.createElement("canvas")).style).position="fixed",elem.top=elem.left=elem.right=elem.margin=elem.padding=0,elem.zIndex=100001,elem.display="none",options.className&&canvas.classList.add(options.className),type="resize",handler=repaint,(elem=window).addEventListener?elem.addEventListener(type,handler,!1):elem.attachEvent?elem.attachEvent("on"+type,handler):elem["on"+type]=handler),canvas.parentElement||document.body.appendChild(canvas),canvas.style.opacity=1,canvas.style.display="block",topbar.progress(0),options.autoRun&&function loop(){progressTimerId=window.requestAnimationFrame(loop),topbar.progress("+"+.05*Math.pow(1-Math.sqrt(currentProgress),2))}()))},progress:function(to){return void 0===to||("string"==typeof to&&(to=(0<=to.indexOf("+")||0<=to.indexOf("-")?currentProgress:0)+parseFloat(to)),currentProgress=1<to?1:to,repaint()),currentProgress},hide:function(){clearTimeout(delayTimerId),delayTimerId=null,showing&&(showing=!1,null!=progressTimerId&&(window.cancelAnimationFrame(progressTimerId),progressTimerId=null),function loop(){return 1<=topbar.progress("+.1")&&(canvas.style.opacity-=.05,canvas.style.opacity<=.05)?(canvas.style.display="none",void(fadeTimerId=null)):void(fadeTimerId=window.requestAnimationFrame(loop))}())}};"object"==typeof module&&"object"==typeof module.exports?module.exports=topbar:"function"==typeof define&&define.amd?define(function(){return topbar}):this.topbar=topbar}).call(this,window,document);
\ No newline at end of file
+var topbar=function(s){"use strict";
+/*
+     * @license MIT
+     * topbar 3.0.0
+     * http://buunguyen.github.io/topbar
+     * Copyright (c) 2024 Buu Nguyen
+     */const i={0:"rgba(26,  188, 156, .9)",".25":"rgba(52,  152, 219, .9)",".50":"rgba(241, 196, 15,  .9)",".75":"rgba(230, 126, 34,  .9)","1.0":"rgba(211, 84,  0,   .9)"};class t{container;canvas;progressTimerId=null;autoRun;showing;currentProgress;barThickness;barColors;shadowBlur;shadowColor;className;fadeTimerId=null;delayTimerId=null;constructor({container:s,autoRun:t,barThickness:r,barColors:e,shadowBlur:a,shadowColor:n,className:o}={}){this.container=s||document.body,this.autoRun=t||!0,this.shadowBlur=a||10,this.shadowColor=n||"rgba(0, 0, 0, .6)",this.barThickness=r||3,this.showing=!1,this.currentProgress=0,this.barColors=e||i,this.className=o}show(s){if(!this.showing)if(s){if(this.delayTimerId)return;this.delayTimerId=window.setTimeout((()=>this.show()),s)}else this.showing=!0,null!==this.fadeTimerId&&window.cancelAnimationFrame(this.fadeTimerId),this.canvas||this.createCanvas(),this.canvas.parentElement||this.container.appendChild(this.canvas),this.canvas.style.opacity="1",this.canvas.style.display="block",this.progress(0),this.autoRun&&this.loopShow()}hide(){clearTimeout(this.delayTimerId),this.delayTimerId=null,this.showing&&(this.showing=!1,null!=this.progressTimerId&&(window.cancelAnimationFrame(this.progressTimerId),this.progressTimerId=null),this.hideLoop())}progress(s){if(void 0===s)return this.currentProgress;if("string"==typeof s){const i=s.indexOf("+")>=0||s.indexOf("-")>=0;s=(i?this.currentProgress:0)+parseFloat(s)}return this.currentProgress=s>1?1:s,this.repaint(),this.currentProgress}hideLoop(){if(this.progress("+.1")>=1&&this.canvas){const s=parseFloat(this.canvas.style.opacity)-.05;if(this.canvas.style.opacity=s.toString(),parseFloat(this.canvas.style.opacity)<=.05)return this.canvas.style.display="none",void(this.fadeTimerId=null)}this.fadeTimerId=window.requestAnimationFrame(this.hideLoop.bind(this))}loopShow(){this.progressTimerId=window.requestAnimationFrame(this.loopShow.bind(this)),this.progress("+"+.05*Math.pow(1-Math.sqrt(this.currentProgress),2))}createCanvas(){this.canvas=document.createElement("canvas");const s=this.canvas.style;s.position="fixed",s.top="0",s.left="0",s.right="0",s.margin="0",s.padding="0",s.zIndex="100001",s.display="none",this.className&&this.canvas.classList.add(this.className),window.addEventListener("resize",this.repaint,!1)}repaint(){if(!this.canvas)return;this.canvas.width=window.innerWidth,this.canvas.height=5*this.barThickness;const s=this.canvas.getContext("2d");if(!s)return;s.shadowBlur=this.shadowBlur,s.shadowColor=this.shadowColor;const i=s.createLinearGradient(0,0,this.canvas.width,0);for(const s in this.barColors)i.addColorStop(parseFloat(s),this.barColors[s]);s.lineWidth=this.barThickness,s.beginPath(),s.moveTo(0,this.barThickness/2),s.lineTo(Math.ceil(this.currentProgress*this.canvas.width),this.barThickness/2),s.strokeStyle=i,s.stroke()}}let r;return s.Topbar=t,s.config=function(s){return r=new t(s),r},s.hide=function(){r||(r=new t),r.hide()},s.progress=function(s){return r||(r=new t),r.progress(s)},s.show=function(s){r||(r=new t),r.show(s)},s}({});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..51f75a8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": false,
+    "declarationMap": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable", "esnext.asynciterable"],
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022",
+    "outDir": "./dist",
+    "rootDir": ".",
+    "baseUrl": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}