UNPKG

topbar

Version:

Tiny & beautiful site-wide progress indicator

7 lines (6 loc) 2.1 kB
/** * @license MIT * topbar 3.0.1 * http://buunguyen.github.io/topbar * Copyright (c) 2026 Buu Nguyen */(function(a,c){"use strict";var n,o,l,f=null,u=null,d=null,p=function(e,t,s){e.addEventListener?e.addEventListener(t,s,!1):e.attachEvent?e.attachEvent("on"+t,s):e["on"+t]=s},r={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},h=function(){n.width=a.innerWidth,n.height=r.barThickness*5;var e=n.getContext("2d");e.shadowBlur=r.shadowBlur,e.shadowColor=r.shadowColor;var t=e.createLinearGradient(0,0,n.width,0);for(var s in r.barColors)t.addColorStop(s,r.barColors[s]);e.lineWidth=r.barThickness,e.beginPath(),e.moveTo(0,r.barThickness/2),e.lineTo(Math.ceil(o*n.width),r.barThickness/2),e.strokeStyle=t,e.stroke()},g=function(){n=c.createElement("canvas"),n.role="presentation";var e=n.style;e.position="fixed",e.top=e.left=e.right=e.margin=e.padding=0,e.zIndex=100001,n.hidden=!0,r.className&&n.classList.add(r.className),p(a,"resize",h)},i={config:function(e){for(var t in e)r.hasOwnProperty(t)&&(r[t]=e[t])},show:function(e){if(!l)if(e){if(d)return;d=setTimeout(()=>i.show(),e)}else l=!0,u!==null&&a.cancelAnimationFrame(u),n||g(),n.parentElement||c.body.appendChild(n),n.style.opacity=1,n.hidden=!1,i.progress(0),r.autoRun&&function t(){f=a.requestAnimationFrame(t),i.progress("+"+.05*Math.pow(1-Math.sqrt(o),2))}()},progress:function(e){return typeof e>"u"||(typeof e=="string"&&(e=(e.indexOf("+")>=0||e.indexOf("-")>=0?o:0)+parseFloat(e)),o=e>1?1:e,h()),o},hide:function(){clearTimeout(d),d=null,l&&(l=!1,f!=null&&(a.cancelAnimationFrame(f),f=null),function e(){if(i.progress("+.1")>=1&&(n.style.opacity-=.05,n.style.opacity<=.05)){n.hidden=!0,u=null;return}u=a.requestAnimationFrame(e)}())}};typeof module=="object"&&typeof module.exports=="object"?module.exports=i:typeof define=="function"&&define.amd?define(function(){return i}):this.topbar=i}).call(this,window,document);