{"_id":"@spectrum-web-components/bar-loader","_rev":"39-8e98e1640b20238b045b7a28f72ab67b","name":"@spectrum-web-components/bar-loader","dist-tags":{"canary":"0.3.0-alpha.40","latest":"0.4.1"},"versions":{"0.0.2-alpha.940":{"name":"@spectrum-web-components/bar-loader","version":"0.0.2-alpha.940","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.0.2-alpha.940","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"fdb8baa5ccff23b1ed90434e765f549433e8c06b","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.0.2-alpha.940.tgz","fileCount":27,"integrity":"sha512-YnFaUaOsYDbQEZlGz8tRUk9Ve5B1CLDIJcsCqp9EtsePdwIvNNV95H7K8ifuCXRJxjiRfq51k2iqmWvBeuh2ww==","signatures":[{"sig":"MEYCIQD9y4w4uHjTzClIWHgKQpaYJR6nRwS1inavB5SPb3xVJQIhAPQiV5vAkE4IAXGFZR+HScXdly4kNHKa1VvGJvtztftt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEOITCRA9TVsSAnZWagAAbFoP/31uVS8WmsMXOLjD7Epa\n6hZWnLC0hSoI7uSgnCUg1lM2lbveVwSEerdaHtyFq3Y9mrg6R/iupD3zN3pq\nUx/G8W0yQcoGJJtB+1HZFZvpdcnEGvlNXk8H/FbXTir/Xi0HKsiuhiaaq/rt\nBPfrrjTVd1ydIDvRmxAHilKfsn9Qf1/GlvYeo6ZwKP1rpIBOVqjDmWin8HCn\nXtl+ga5IkVP6VJw7s8eytplZaP91N3x3mSD3nrOOFsybx3Qf3hv2AxomVvbp\ntDXMIBO7p9IX/SrXAC9U1P93wDU7w6KO7/ugmnM54CqAKto7h+WeblaOfNPB\nw9xZ0JY0lm5YDyK0oOGE0+PZLhRVRYQFE23rind/LXb7xnFK32UeHzUwPr3d\n9rwPjyGrETaHwVoCrVEflFDupkfjJV6DQat5CJ86vKKadGqFS4ZH/dn3Km4i\ncwYysSGfl+HbVviOhdnNwqVhWZ6+j4T9w5wpx4cGXyVOP0+KHIW64aEhR2bB\nDeyiy2XvgIZHDsPRCWA3Boo67AzD28NtQF2gBVI2fFpggEzAaP8+CNg1oEHz\nWdUjCh7NuLEczTc9ri89KPlysijbBzzNlli72UyoXSTLVHgtHq9EOo9kFyVs\n//m6AXrNDz2UklSsHY+M4GRG7HvnXEBwpgYR6k0ABDPnI+VY81WsvF54hp3B\n/THG\r\n=OjUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{"./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"3926abb2769a9bab28762bf3b3e1fab7c5f03589","scripts":{"test":"karma start --coverage"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v10.18.1+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"10.18.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^2.0.0"},"peerDependencies":{"lit-html":"^1.0.0","lit-element":"^2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.0.2-alpha.940_1594941971525_0.7073378695178743","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@spectrum-web-components/bar-loader","version":"0.1.0","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.1.0","maintainers":[{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"fd36b36cee9bc8b85527a4686ce139ca9b289638","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.1.0.tgz","fileCount":27,"integrity":"sha512-U7ppYFqlKR2C3m7J2ExkbSJPd59N6JI8XxXdQNw0Cpv5hkzxIdvTtXIwYd9wYpAFLCFp9U0teFSxvAiwfMRaYg==","signatures":[{"sig":"MEYCIQD+xEpsaG17ONIbZnLUzjOYLSF4i5hjZ3E0PLY5MqPnfgIhAKGfGfSkIp837gqcVTU3vlLZV78WUlfv0gvMQHIStwEc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEhqSCRA9TVsSAnZWagAAngIP/1x6Dc+ybmHyx0ELaZyZ\n21SL4ZUU79RK9Y56a9KxB8irOu/RCdIOPBateJa8e0SscFPhI6bUQYA+3qlh\nx2sOQbhec9yKdk5TgkIKwcuR1YARuB1joxUqbAdrposCAKM29oPJFMa41G+W\nlFYsIUXrLPLq3NyFqGxOLF2Jf3LNm0vcMZhUt31o6b6QuRGn4EkF+QzWLlU7\n4pRWIxQcca7dPYgpjymeNpG53f686orQlXYGTJAhTTskCf7QAo2D++459jPL\n+tdFFs8rjuO7686KBfVfHdhcIblXR+nKGV7H44ke9UqQ7FRRmv5fe0o0oFf0\nq69yFuL3fS8JbulDb5SDO95eI1xHJdFk2cFju1AOMvzNo2IjPxM/6oalIRVp\n62NyKKqQhxLHsrrfjy95EH87E6RLlfD25mtxeWt+Fm3PBl7B0mhKZsqUm5rw\nj1IIak2VKNYqIik7gkglu0YxsbQqQtkOQTkUTHoszhg9QIo76Hy9al4TJcYL\n2+ydGceKMoF5bDE+4X5H/6rgCOibyXG+Wjkbpq/qgf4x5Q2xhiyYChAzwZGF\nYTE4nrkoJnTJmGN8JS7KFZ/MlbZfh446BDpkn7r1+T5Ate6FwxTkTa67tsIZ\ngXGEpTcZrwVjAhOAm6/6meWm3N+hM8wBOqZSxSrAWYUHSB58mQ32DF1UhXAb\nv2IQ\r\n=ocj1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{"./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"75044c0b0aeafaf7c6d90c32c7b4ba1fc9d3bc28","scripts":{"test":"karma start --coverage"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"6.13.4","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"10.18.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^2.0.0"},"peerDependencies":{"lit-html":"^1.0.0","lit-element":"^2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.1.0_1595021970596_0.22285113987711846","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@spectrum-web-components/bar-loader","version":"0.1.1","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.1.1","maintainers":[{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"50c44e89fb0b1373c58384e8169a2dba58ad516c","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.1.1.tgz","fileCount":28,"integrity":"sha512-6xCLCPUCKMQ2BB+w1lMAflWrWnrNAtH8Cf6PhoR6LmrsTC5753VDAT9T+4TZ2LvQk79YdJG1rvQZnnHB2c6OcA==","signatures":[{"sig":"MEQCICc+qb86oouf05gaPnnQAFJAZ8Lwe1Zd17yvRNRwii5pAiA9btOu3gyMmHitQYbhHgkl3i9VIcBRmGSiuMw4t+xnKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaaaCRA9TVsSAnZWagAA0ywP/2LmpuAM1SyzsJxnBuGJ\n9BDem2mXf8aifiZZYIn8KiUKkMvrfrwEz0zh5l+ajurf8IZknFMUPEtTXH+y\nKGsPv6P+lzAKlBCQvwSE46SzqvEfY9wDoPAg1tieH53fCAwj5YSBQxH5VGou\nshEXMNNlO8nW3qzgvmCNX+yQ5itC6UNiEYRvTweOlXrDe/0lzN3fME2sz5QE\n78xCd/xfR4ziGf9tQ1/+z0dnTRmqYzdeupJ0Tn4gCHaD1T+VIZEcl8913txQ\nJ4QA7n94PzfjzqdWb7ICtw3bkndGfTcQ/v9uEgcQOPKrbBNLRMuKlhH8dCqL\n09o5oRlOVrI6QWpI5jdM9o7f2dHiPgLZXhv2mPHUAdXBmz6tOjUcFJzAgEEj\nWEWsrTcFmKeyLP6XvctVyD8yhEQF2u0AMDXltEYy9MObu+b/WBtwYMgrodyz\nKZqiDJM68F1lhvD66VCOdoDed/RD1jqfBuzLHX/JizTtHkwfCTlnZ+eTGm4R\nQg8JRQbiaNtVEEUjT0GM0UwCtpaqBlypzQfHilhc5BfjGepYz8xr22Pv96gj\n5vLsCjhcv3CGMHArLI90nOePjb3wD9579/UlQnQhLVhrplzTOe1NOMp0DnOu\nE+2ctgsBDJcLpw64Onj9hh2OJ6ywpJYDSfQSC1xQRro791OKaUbttbdDbli2\nZLSv\r\n=c6Ws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{"./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"61d6daa63fedca757761095d1e1ed6919d8a1673","scripts":{"test":"karma start --coverage"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^2.0.0"},"peerDependencies":{"lit-html":"^1.0.0","lit-element":"^2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.1.1_1597875866275_0.5816727240565736","host":"s3://npm-registry-packages"}},"0.1.1-alpha.95":{"name":"@spectrum-web-components/bar-loader","version":"0.1.1-alpha.95","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.1.1-alpha.95","maintainers":[{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"9c06b06df3370f1d26349630233000d3d1127d34","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.1.1-alpha.95.tgz","fileCount":28,"integrity":"sha512-JS5uKGPGDS0v4ttyIf56YJfFpIzFAPzY5KFSAxVGh7+NRp2mMF5vLCuTMFTCNG4ntkBYtoTKcvnj++LSoVa+tQ==","signatures":[{"sig":"MEYCIQDGpqvHLasNjm/HE2b3VW38X/a7u1HWt8PSj+g5kSGIvwIhANW74wBejVBvtLdFkwSmkONm/vhUhr4H0Uqn00EJAj1f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsGHCRA9TVsSAnZWagAAYdkQAKCUz5uC5lhAVgkpwiTZ\nk/dBsgKSxVpq+kYBiG+l1HN9PgtNHA3Ff/TytqXjaJKjnm68ViIwE5yZFsDH\n2qYy28xbvdEeX/wVPJKxtP9ZGJUS58ud10qnLB8ui5rX8x0VKIuKImMRRoqk\n8//5p2U7Rc5bS0SD5NzsIC2xaUebOMov3jwGiFLJsEswLsZOn2Q8EKqZHih0\nnpiLPUTzfwQQRLzr9jt/CDppTrslLqb5rL1gpWQwqGjFYQkgzder1nVxzCcs\n9s38NaauSW9Sv5kKZ+/iEdS+U0FZeCkHftQ011IBARs5xYmbMe0sNEZS+QBa\nx6BHDBbOvZn7T6LI1k18KZxnzTjv79Hr1u8LsCQnwdKkG47StIF0WFjeadK8\nUkpS9RG0kD8BnM2NqpthUrRkgeZ866yMyfYHrbEgfUasYF7xwx1T3rHpmZdp\nrXSx/XzZXWeOj9iRGycPYV8gNsyQT676iYwmstCbPfd7+QTeeKmENZYLMYf7\nU48wf6EPE+AsF/NQxuFOfiq0Y5tVYI5PMfzWG6R5H5cCIECrnhwa9Ipr9NaY\nx7Cbl21rM7Ko6pOklXLQdUJ2truntkOZbGjO7kbMkTxzEjcfCf4gB1u0taza\n3EzlNaoFFFKkM8fR2aWaSPXtGXdfejTSiDZQ7k6C7fzs6LEfSPEx6LQT/YNS\n3UrT\r\n=5k1Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: rgba(0,0,0,0.4);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{"./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"1e82c26ee95e858f3c97afd070e1fc9e3905cebd","scripts":{"test":"karma start --coverage"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.0.2-alpha.1038+1e82c26e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.1.1-alpha.95_1597948294965_0.6849708458362318","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@spectrum-web-components/bar-loader","version":"0.2.0","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.0","maintainers":[{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"a36895a16e7fc70df39694a19753a45c0fb57995","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.0.tgz","fileCount":28,"integrity":"sha512-yW7If4opErtV2zRsG39c7K/0sxiDPDNgjYashG4VF6kDYreDEJmoXwEKhrn0JWZwFWIJNf41VYWLWmDsmZtfoQ==","signatures":[{"sig":"MEUCIQCzRsnaFkipP868XVWZZYo0ogEGVOy4RR5+TsYsNKRxbAIgFJPdMB1N79zTsq8+TalrIvGHeXsn/erJ4Bo3maegbXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTTvhCRA9TVsSAnZWagAAGtoQAKPiDxUKd/DH132ne5SL\nmDwB2Q1oqVTRwMjmHXaau3JmOZS3AhR+vLcKBmwwG3dSQK8zPE9TmZBQFcCi\nZ9YoD0AxoYzeCU1sZ/q4yHy0ESr0SKHFGzfYnwoSNPGJX6Xs+u95hw2QahpJ\nlztWjRpZSxPTaDNhqpB1T3Pb9qX02fGoKtr8hm/6B+TnIXW5wwodSwYRYi0L\nCTU/pqw5WMD1GvR7ia6PjBIEs1WZZPVwokOL62dJZG7NTG+KefyZb17k+Qo4\neZee41RK8FBjTrQKgIvyryZB/yoXfS+H/GpvcyEDi/McWDdhCeXj4Mmj8ptE\n62DbnHoMe2ktbgN2kmj8UaIVp7/w1gIzzVc6Rnw86zs4Wh62NktkrkgRGKg+\nr/oTEq1Q7j1hZXfFVn5QzuAptrona7zMe3GzJp2NXTeVyg7za1xeLMwypp+j\nTs7hDE63zZdyNy1Je1WqNf72gJEwjWStcYFQLzR6QCO/XAKeYdMxhGCAUZpJ\nCuSiSz7OuVWkYsMXxrTE4e7laKZGl2wfrJNbrnMW4ZY1eGVk9cEq/9mQ/vs8\nNyogCBbAn5fpN1g1r1DGoSUh051XCAmxAAKgj58xDH8Z90x3/mAoVQuUmAHp\nC/x3kgwsK/znRiNvTaEO3u41hKF/6TIc7+05VY8UvPhXvOXdI0LFCRl2qvrQ\naB3z\r\n=OxnP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{"./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"51706b5f7aeec990c6323501aa22f8aee5827e31","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.0_1598897121543_0.32550378497120347","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@spectrum-web-components/bar-loader","version":"0.2.1","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.1","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"530bddf29d878067af2223ca3e2cd44637b53a77","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.1.tgz","fileCount":28,"integrity":"sha512-TeYjrjxCQXxvR1E+hpGCXep1AbtE24zYLt7AOW8ktjDSRJH2jVKVyvtfd/bgCGR0ZHD9dyB0YNEVegEo63ukfA==","signatures":[{"sig":"MEUCIAhW0wHpNXH9QYQ2JjL0k76V+tDyAyd/PiQK9kRkfWg0AiEArmS1myI4sfW3g0avIr43nAB4St5Rm54ojyFZlZ9aCyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbeAcCRA9TVsSAnZWagAAoZYQAKFXAV8Tl+RzRBJSxkwh\nyuOT98K2nGpidsxgZVNaLZnRAS6B/2RRbAAhYccWiOkmXGl5zjwgv7VT1KYj\nrqQH7uZDuwexyfsYlVVeQUjEYT+royKns/XhJk6z/DbnLdsq6Dk4l1/6lvCT\n7Q2wlEkaJBVGaLb0zHR/Zo/6K/+D0xKf2byJHCZ2G3uGGSVBdkoUC2ebT6vu\nDwW0hlTqbJIxeUEli+KHnN+c71KKMyida866D0bBlieyDkzU/nfgqKiD3Rwe\ntg9m5gd//cLti3QSJaR1R/vIsM7gqzk2iWW7vJYyzr03nJNPAMHvqLAEguaD\nCy1RpGuPfbuPOTcwKa8l9RZS5O5ZXq6DiVeMMFZLMUTeJpv3YvaPAhAnUIDa\nOg47GjmLphWbNsIYDFbWl44+gB4mxXE+HQ4x3greNfyzC9eZRtM3MitGnYmg\nCMTFWlQJCePVP1HWmL7OsY/EvBzl65vlt2Y0XY7mxY4LQjshzMyUrdobULwF\nTy1MCwnCYhUYBfvs76TYVpMOIpAMSajSZtbClUBPLHfXgzni2yZCImGmB6Qj\n+pr+xVbgVtGWeRRUl2UK+aMXIuH4QdUYTXZy4vB3uBTMk1VAEvw8S3546l62\nu+r7VBisRTuX6OQucTxe/2Yp3y5rDYHMhcOxWnuN7fnCrm+EbrxDcr45qbTh\n4q9P\r\n=scN3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{"./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"7ce968fced1870613e7ed4a9023eef6265a60154","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.1_1601036316483_0.42220941066662077","host":"s3://npm-registry-packages"}},"0.2.2-alpha.17":{"name":"@spectrum-web-components/bar-loader","version":"0.2.2-alpha.17","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.2-alpha.17","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"cb46ca5f0d828e754d17f6e50f36212b4290c62a","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.2-alpha.17.tgz","fileCount":28,"integrity":"sha512-anKR22TL8iKgHvNT5/M4AqliKx0hKhNy4Rwd16XmBzjrOyF1p4LvzGK5GCkoVcpqGbGTnZxc8L4Oobkvoamxyg==","signatures":[{"sig":"MEUCIAbvrOauzK2RHTbcNww7/FB02s8zXcLSWv+DUS6VOWB6AiEAoSf4O1LSw1TH4tXuweXbp26fRkbucgYRNRgfKDA2jX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffo7aCRA9TVsSAnZWagAAu8EP/2O5IQdJNY5DwBTMhoLz\n2dbSME6csKG+mIV36I9CNjBywHIQrfaWNLqUsk6coMr+p6kSiZOTfKdbzYyq\nNSWuCBxQMy49cm79DhLD/encrniN7c0aW+YhU60mknusDrHwWxOKHjayMNnW\n0EESRHlnUmE4cislXznaSvmcc6ZOA0huFCON9VyH2vxRFkKdL17IGf8f0oYY\nfJ+yTgpLx/mYIhKBolrGHifdA194P62iozJxXZuxgWzJUCjIySq2Pk0pSQ+1\nxWcBWjFpAdSCNDwVC2Qvq+JVqG5BHfgeZHmh2jUDG7DQecgEfdK1vV3O8ovc\nVMT4OwPgsxHwFehqNa9fEpWWS79TqssG3Vqgsr8VeH3ZaBjz90IDCecmkG9h\nVZZ8K9ZVgqY1JRAUbYqUhMCheUNkVhgFA/kMz8EeiS3QwcEKVY4MuToKeNnU\n30EeeW6B2qUMyNVfFV/2IxnS2BznTXC2nPR0AQQep1aN7V6YQZPhcLAH6b8W\nL5W5493aSJC7eGhVqlMmTssC3KjxMx6I+ZTmIOQ9vE/0yC0X2L5orJ2kyls3\ncJ3YPtvSeggMz2U50eY1t8ZzTTpz55Of3REw8q2PB3PhH3N06QvI58z2ZxSB\nxZEyH0Ia75eaxtV6y6U35AJoyb6KV7Hw54xUMbOkZyli4iUlOMY1C4acq/9k\nXPLg\r\n=a7E+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: rgba(0,0,0,0.4);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"78878f74c0276b0677b56033db46c65d75450c84","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.2-alpha.17+78878f74"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.2-alpha.17_1602129626434_0.3766881610199839","host":"s3://npm-registry-packages"}},"0.2.2-beta.17":{"name":"@spectrum-web-components/bar-loader","version":"0.2.2-beta.17","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.2-beta.17","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"22177253c13e833be152f53f7878beb5892d3fda","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.2-beta.17.tgz","fileCount":28,"integrity":"sha512-qsDSpAWsOh5vGP8+hwSu6+rRd5N7boRJXyi+taEsggalJmbKttjaapHFYeydNSp6ALcnuotW9D15tw2h6HAFyQ==","signatures":[{"sig":"MEQCICDTXY4xXxEUp9Epxocy3+HtQqucsiH+FOpKRtYUCym4AiBUz8hyGDVTsRuIPhdhF7VRR6467O1/DyNH2mvirxzaRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffxcaCRA9TVsSAnZWagAAlU0P/2dTdb+GI8A7YDlnvnQp\nZhvEaJkG5Se3yzVk2T2qWQXiD1WMfoQfJcXkhI8AJZgqOErcHaehDJ7snvS4\nsqcHG1mwcZdat3D0vzPmPbnQlsQ5G8Lqpyjn/KS1V+NvSoX4JeR19YAJmvio\nnIf4GpoHb/D7inLyrvVUsuez+8T+P72fF1NNw6Pie0YdHyHz6BYWxV/RVffP\nn+aIPQP88V2xdkRcUTAyEtA6aqMIesYUyryHDVMkZiBEHhN1fbTrYlTYzXFr\na640mgs7l+dfYjsPj/yZ4MS2wJPP2UfVKIhjxqpswVV/GLzzTmrUmurUgmJ3\n4SlbfIxl2z+GBEGvd2xSY+GqcZtLa4v0yVvKIuWqhmk1EjwkWn/wiNGt/PYR\nHuPuNDB3ADT8ONCntPbmH4yepEMoO6U/29CcPgQ29Fxkp0YBL/3EgN/hb/Wl\nNFgaaOl7ffBR134LQcxrfOEbd7AugaB95KNtCkhXKT7tBm/ud2CDFyvlLpgT\n7dj6+Xuskm9LCtYi1utkXFclWuznfsSlLbPbyT8ZTjDjSMjYaGEMlQetAcOL\nlTMInTKCCxBBzEoXiTMEswIRomV7QuAWcsQC1gR9sfW0QQJkpernyobclanz\nBWT8yYcAMiF4R/ztrHoXfu2emW4r5vx+L1UpDDMZ0abzp2YHmzTUSJHMZk09\ne8cX\r\n=OD4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: rgba(0,0,0,0.4);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"bd03dc71dd79c70389d3795b167de4a8a49dc9b6","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.2-beta.17+bd03dc71"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.2-beta.17_1602164506244_0.5115266387107706","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"@spectrum-web-components/bar-loader","version":"0.2.2","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.2","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"65abb33ee6b9580c5352cf82a69356981f019948","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.2.tgz","fileCount":28,"integrity":"sha512-JPE3z+py4jATdpr6rISGDNb5YwYVrcI/VcArfdAK75BDU5PsrzSoM4rIrePdzECfRNFN3D+/c2tPP+jvzysTbw==","signatures":[{"sig":"MEYCIQDbJTQnfZdCf3dBthzwxKA5tzii5j66k5jMLRQ8X2QH+AIhAL1ZdQrYJJqWwX2o4ZGXkNrLJVZ1lnNco60d8myWY+Jg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJh4CRA9TVsSAnZWagAAcRoP/200xQxxyqn4elvSFIEy\n56wua16/2FCBtj3t6syNy84B2+HJPPHp6zHkzhUtdphzNxMSTPo5isU7OQsx\nggevP5laHmhA2JPKBJdgBopyGJCoYcvP/rqJwV3XFgY/GiOdabCCdGsgK8Fr\nACTdb5YJnCC674EpQUOQpectH1WzcEWLuTPyJdSZTrsfxelPa3zBN+TvMASX\nibJO7LyvryouND+0/58H8xcNy/zGyYzjMOA6NDpOYGxGyLjsq9GWBWqE2Kv5\nzplL8oqESkFsXBaZsrFwL/3uY11lP2NqjgyPWQLjC8O+IorYFwYKUTT1xpcx\na9IRe6W1FQbxdzz4HASFKBOGCu7Hl1LlXZ6Z6z0DgZwM5HT3m0FE7l2U50JX\n50yMpLi8IrbjtnT9T7/0ylATp31N0IuB5gVuK5fiy+GWFjOEP+rzmbWBoUYM\n5r0y5jYF3ypcbAfqdZ7lNluRMWACCCuPLhy+qzRy7uUjqATL1ldD3UqQY5vo\n8qnsDGLhiNrKwhVNOmfLFoiAXlyn26zS1WkbCddCeSeTK5n9FAfbdsal/afI\nN63jK74cdkPdvaTER+OM9AQBRMgc0A9lTwjifj4QJVkUS2rG4AG6sIf1kUcp\nM21IDkf5p2MkHaL3b9Xzuqt/TuHzwR5JzLIlxX2TyojpHHFP2DF3rD7lFU5F\n1bsN\r\n=Wn/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"aafac9b1de50bc8611c6fc0eb509092113b4e649","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.2_1602525303925_0.8642403567046053","host":"s3://npm-registry-packages"}},"0.2.3-alpha.0":{"name":"@spectrum-web-components/bar-loader","version":"0.2.3-alpha.0","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.3-alpha.0","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"acedfb97d8eddb830e55a5161791664d4298e732","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.3-alpha.0.tgz","fileCount":28,"integrity":"sha512-IYP3Xu/RV3TcNCmPeGwxDfmOpSV29Zl78wnLp/GLPk586aqrTv79Orj4j6oIpQDeLYWid4rTZMOmfeQTeSeYNA==","signatures":[{"sig":"MEUCIA/55hWO31BCHHBoXq82hYvOtNuoxoMnoMrYiKweotuKAiEA/9ABq1A/i3aWnNFzBQ49pYX6Y7GR+G7Cw2yM5dyT07E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhKZ7CRA9TVsSAnZWagAA3m8P/jcAcd6II6xtFaJjogr2\nNCuFiVgFk1cKIBcKLj7WR1OSSfYs605dmvZMK3keVyd8pFUp5Ha3CBn6H74S\nwfJ5tvEZaeomUri0utH0c7SLLTdughAxjMjwgn8eHSfZ+iFqGopijA1xS+6V\nWU+1oXZsdEDahRqrapjrNr9VEIUkxQmvD5TJRqrOzWmQIJrP/Yjjs6uc2Enc\nXiKGvttWksx+OLcm6G2JZQLCcNGuntl4bgS28r7B2NQJge+AkHWk3OeW1Tvi\nKoMIXX3Lz+6+Jsb58U2TmhToJq+bAcu0uZvXuHe0Fh7XqJOBzOjK7IBxDrz3\nSJooZCcNgAWnKJpj14YEK9Qy7aHa6S9bobIcKp3RUbPaaiefY2YMGpHp3YYX\nKvTdO7Zuzoz30/fIIbJlA8jK5fvk1oyzo6jwuFrywoHZdadzjpElwzO3tH9k\nVi+87j2vx+iXdZvR4rfW/imWoH3hucHC9mR9GHeQcnKDYyGr8OMZvbIkicoq\nrtsiJjEYs/hYSqbT8cjR6rc+JPCFKD9FiMp3GMzdqE9jU4C2g1DjOpil5f9R\nEdxiUZRKT6ftunatzJ3iebfSur4VQ1C+woV+2vE5kmdzI8wAOR/yXv3RspoU\n1s+v1Z4i3po/VF+V5TLo10wHh7aC1awtpc4paoAhwtfK9wMP+1N/Xa0QahT4\njx4d\r\n=EUHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: rgba(0,0,0,0.4);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: 250px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"6ea4d9d299dc805a0b1743c43e5b67d07b0a47b9","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.3-alpha.0+6ea4d9d2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.3-alpha.0_1602528891464_0.030848590175868384","host":"s3://npm-registry-packages"}},"0.2.3":{"name":"@spectrum-web-components/bar-loader","version":"0.2.3","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.3","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"099511d1acfa9c8f36f2a9c3831f6e1be2927909","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.3.tgz","fileCount":28,"integrity":"sha512-Cn6avCX73UUi2rlLvGK578MBbx0cKsteMWYWbSmJg6ZgE6C+ISpqH8KsJmn5RS+NnzprRrYu6sonV7CbQFn+sQ==","signatures":[{"sig":"MEUCIHYX283husUW38CbBqT1OQI4Ub5H8Ho1oKK5gI6bf3k3AiEAm372hRr+xXtFtVTUTZN78fjaK67A6VXw87G2lOTloEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhLwiCRA9TVsSAnZWagAA69YP/ivILDnjU+ki3Vnn7nNF\nIoKOWSpOH52S7ZP2LK7hac11J+j3nYDmAmWDyHKlM+qjp9KlWgmRF5B18Nwo\nIwTusMX2MsrhXmiw5frekqsNAf6V9zRKfjdwxv0DkxLnmGpto0uJk4DWwVYY\n8QF2EUpiVeEnNXkvHQXhwfqBoy5ZkLbkwN/mVFZHIi2GKBrM2iuYIcXhz3xb\naXc3c5/LO7lbQbX0kxJ2i/RQIS2SBzxnQPkMMk8IFSZpHUXGxtb1vhYNG5ny\nzn0nZLmKfQossXoP3buwBxUnPoZAqHFoTp7W+736RxQnQQ/sJv8QB6pg48i5\n2u5IHNnrsFgGULqiJOSzcjfWPUXheuuzhKGfd2x1nCOIkvG5HFBDxx/h8ae6\nn+BPx+nTd85tVw89DnpmjCXNXSqHzcPKHw6BTrg3j0h4FMw4q7IKkRG0YpuT\nQpw4C3LFnQ4wCkeSu5xAOD6waixW49K6uzysI9v2W3O60MBg2V2iNNz7skPb\nYOCYg89/aI55VyEM8eYt1h1ET24FpUAKoXTUJurbMxbYFV4peMRQBejzQa0Z\nugS4E5opp+Z3lQzSQTuPvq6QBvcETWbsFD8dxhD1fzcnc5siZp+KlKuSVba+\n9NDY+VZ8VwjiO+B/oekpPQLoXcxT4pAd0q7CtiZ2VqVUTwTdGVjDvU5u55nl\nRQ19\r\n=jCiH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"d57ea3ab83d9c16738fdd95d326e3082b1f997e2","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/barloader":"^3.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.3_1602534433743_0.866789606260769","host":"s3://npm-registry-packages"}},"0.2.4-alpha.60":{"name":"@spectrum-web-components/bar-loader","version":"0.2.4-alpha.60","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.4-alpha.60","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"23db553de3e979ac44bc0cc9fce4f7da4f24defa","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.4-alpha.60.tgz","fileCount":28,"integrity":"sha512-gcQ2YS/jk8tFKmt9ZUqV2QndcNnBJk5wx0r9LdG7UQkgCigOzdst7VLUaVxg1xOQ4RkLE4FqGXtuvfhK8gSDOw==","signatures":[{"sig":"MEUCIQCPsUQb7Iy3+X34ftw5vEuoXGeumry69TM5Skh+IUZZ1AIgAolsZLPdcZWzwrvF8nANr4aQjKsuUUSHUTHSQF3bT0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfttlBCRA9TVsSAnZWagAAHIEP/joOG1RFZcbCxU+NgLzc\nXXmZdRp6KsTFJRf3a88wy3MaluXpZzad6HGp4dcSy3eV8NU6QEb3VJ9vi4Pc\n8OdAQm3cM/ypWmwKdQUj1x52ogky4icpXsgp3G9xhAHNjHCepdmdR9NVX9ea\nXWc2j7qKHtzlu6PLSksAlMl7+a42ewmWvs0xf4AynuRyAIKCLJ+wHtO1y+xp\n8xCmaAoKJ9YFKf/0iWkGyVvEpJoEYncXSom0y9lxQyrkiDkZTWIWZfHv7lYQ\nONCp/P1ezk7ZKMxx0HsBpCwzI/2aClfrp6+cToMre6fomylmcKwzTquxgJjI\nBGG1qcwm8D7b/96Jm1szKAuFfqMCVPAmp/vOcUOYFU+k7Alae+bFYQdMF7Q9\n46Mt3FMgDMqGx13QMYXehtHf5QtO4rxdMIuz7mkylNKZ18CrB6Vl0dylfKW2\nAlmaNgVn6GTHmrVYj8mxxs4ILDWULwLI4VlIpbZWR8O3eh0Nq9s8asi9oBL/\ni5nipUhvFV+b2ZwOiqpNdrr02t4/xk1KPTZBt/wauXjiE97QR2FTFueBD54o\nIztdIJKPu7nsj5uCGC7+SrPdzulWQqyQu5zHboDTRjgvXlIZRFfINeWC7uj5\nYqv5NXM+HrAXwurHlt08FORmoEGODX3po0CtYu9hTC39IGOBnHA5c97nQilJ\nc3Dl\r\n=W4mT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","type":"module","module":"src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"a478c2c484b45e88c5d8b5cc64a255e31d0a3829","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.4-alpha.60+a478c2c4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.4-alpha.60_1605818688738_0.5805890340431601","host":"s3://npm-registry-packages"}},"0.2.4-alpha.84":{"name":"@spectrum-web-components/bar-loader","version":"0.2.4-alpha.84","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.4-alpha.84","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"eaeb22868725a14afd01fe7878a000f9cf0ae237","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.4-alpha.84.tgz","fileCount":28,"integrity":"sha512-9zGG2CmCN4dGuHCPojBxr3/WfXKfBUC2363jTU6PVsy4pTt4dbEtshNeNYSKg29zp9H3a35WxISRqrJSNcOnpQ==","signatures":[{"sig":"MEQCIHrF37xwC2gt8eqdrZ+DmANloVwIsag6KoU1REGU6emDAiAm786M2REHLl7wWCWTC/bFdpyHk72oosSiLaF/Qy2zZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9drCRA9TVsSAnZWagAA2dUQAIPEMPFVK9fMFexpvJI8\nrqhzCPUBucryUI0WhbkCtamsKJzZfaudu/kUso1CjBtJbKprsrwO8yLEB4m6\n09G9KRUmbLn1YUqXe5NXeVvRZ/m3kfR42UP5DfDayWfIluxbY5zTaSd0hTHN\n9bhz2zqkJFCr8PPJvMY/Jc2X/p7EcCFyjVmJxHttEj6vvq/HJlFhWlpjJVb2\nXvm9fh3lGewwbRoHExCoB6X9imtm25cL2L/HtQ5sJtmmKTSdtGhs36cI316/\nRlAMLq5nv643Cvmoh5iYCDMhRMHcu5YhIFar+slM6jfC4kj4b47Rmrah0ppz\nh5RNSWaPcGcQTTXj1uRMxLUl8vUqWKhMPH1N6QUR1Ku4cdy1YYhRsofwdaPL\n/vMXhkmWpMxMZUtgqy2QPadTXKuSpeajEUHKCIrqzVUwrhXadyAu90odONZR\nYbnZLrpWNHcedZJAhH2EauauwqHXMWf6nM/Xb+pin/N0zTaKaQ+hsFcY4GSe\nQntnslI1vXntJmrzx9ThUaMm2K/PZeVFcM8kesZfJh/hoQFB9uo2AXJegkYU\n1kud3FMKZAq+rZi6yWdI1Bl5fsEQX4JqPt+7dsytIVSRqoxWNKEHO1HcqgNL\ngMpyJxK7TPxfWU+hPhrCYBD0et46uA2aIEtu9CKESrLeal3BZs6V+a1MgXRw\nBPUE\r\n=KcbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"1680fb01795050191c13f5c05f554d923ff850ae","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.4-alpha.84+1680fb01"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.4-alpha.84_1606932331172_0.6173819376143435","host":"s3://npm-registry-packages"}},"0.2.4-alpha.85":{"name":"@spectrum-web-components/bar-loader","version":"0.2.4-alpha.85","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.4-alpha.85","maintainers":[{"name":"msdewey","email":"moiradewey@gmail.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"westbrook","email":"westbrook.johnson@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"535a4bf58ad554f4a71e997ec3f758861c7796be","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.4-alpha.85.tgz","fileCount":28,"integrity":"sha512-z7n3ADwRIIyWk51QfXXh7M8ykRbR9Gwe2IHBxoG4r3xc+Ud9U1N/WpGZ/c0pXxRC0y3iLgmyWaJfAiNvSfqCZA==","signatures":[{"sig":"MEUCIC92FVZ4qRdOubYO1ozUVVMPfTQxpRmjq6RBI1px3Ge0AiEAxCI0xMv+Na4IT2v96uGAZi/6lux7C/RDoHPHjjthppA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx+UECRA9TVsSAnZWagAAgrcP/0xZRmmectF37olKuAAX\nS2COTzDEpvfi3XneIaVMEOPm80toIqw5djsGCTa9vGjrfy/f9AyMmhx2ACrd\nO1BjnqntvUG3Lvy6eGTFZVHh8auLCH5+SJ4bwuZN7qw/xMw9jKfYyyKHn/MD\nrk1nHQJqxN3+/Pp6bN1Zn6Qt+mj4adB6NLIvf96ppCVcA/VV/+dQmaOLMKpA\nTIWfPcCI44+TkkPGfJCcIduM1/TJ0LcMeG0DYDfIIUoyOibm4v6cNFaz66kB\nr5ZdvzLrp/aAiE12Lt/sV7HuclUrZASUSxSqIH9HpE4VCw/ErEIfIFBft8SH\nbSnMkUoHjN/xkrN/OoIUOihScLZcEZK5sDAmMSs6btcbfeJXHu8BusrcWwRQ\nOTGFYkk6stlvQ72vlwL9W3KIrvTE5njZUGMnUyf5lpgsIZHNKUCaVvenge62\nU/ZsJIXRUrbNFuiqdWrEcgPE9bxtaaYeMudXwNbPJQi4TdrvX9vnaKnALl+H\nehYsuCFtBi4GFkWTpjMN1sk/QYYaDEYNo/+s04mAoKItMvZSN6dLgnoUfI0j\n1G/AVLkOL3dMM6z8yUo6kEg1oAbV4O5mh0rGgDI+hRv6EU802tz4Xzm8BxCs\nRDzr+5tPkAXUs6wvurWfkd39c6zxm5XhZtznNik7/ErMmB+92I4gy7XCAyR1\nYaQT\r\n=iw6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Variants\n\n### Default\n\nAn `<sp-bar-loader>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader label=\"Loaded a lot\" progress=\"71\" small></sp-bar-loader>\n    <sp-bar-loader label=\"Loaded a little\" progress=\"22\"></sp-bar-loader>\n</div>\n```\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"42\" over-background small></sp-bar-loader>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate small></sp-bar-loader>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader small label=\"Label Above\" progress=\"71\"></sp-bar-loader>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"d9ef13866edfb98e309914ae7582b807bee5d241","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.4-alpha.85+d9ef1386"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.2"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.4-alpha.85_1606935811706_0.07012947229191879","host":"s3://npm-registry-packages"}},"0.2.4-alpha.169":{"name":"@spectrum-web-components/bar-loader","version":"0.2.4-alpha.169","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.4-alpha.169","maintainers":[{"name":"westbrook","email":"westbrook.johnson@gmail.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"2391a0ea2db57a5531a8da0a1655409a6fb2dd0d","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.4-alpha.169.tgz","fileCount":28,"integrity":"sha512-S7dXr3OZy/leZVKiOqG5rowKP/tV4F9EZcSmkp9rjkGcRDqNs+lJVwgKIHL+M8akgLVqCS1ghGbmS3JdlxHWFQ==","signatures":[{"sig":"MEUCIEf4cG+MHDztbxrre9mQhsWVJXIJW+jh5qfj+nlvz7wWAiEAxMG6Ke7hnugT71cduCCqRxy9pYWO1OQH9qMBkEPFl/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/iESCRA9TVsSAnZWagAAuAEP/i+5yQsT3ucfLhyDxE3M\nWY0giSU/w0CujpxqG5799UFMk7qPJI0DIvEwLyhfqFaFDG/I6BcPbV5k2d7J\n/AOo0SPQPWXp2Vg9gPCGyGNSC8vn990GrEyFHl4o/RK6ThgVSWfKTllO+5IS\nQD/Zxrx3H5/oq44ww5JT9sm2Pmyn5xIrebNPJgMc5/z9TQnFVB4v54iAnGmm\nQjhceSvBKPP8N0ottQEVye2rEZE1P0lyZX7OnBAcFQrTzBC7zvim6je3fAvB\n1QuPRizpljNbq5aykIy7iuCr9HpeferqTgltHY43KOj9OSAUE3WQucoqQ1UN\n25WCr0Ike6e34dGMWnLCGMlzLO1hP6h1t0HDVZ/kFncBmpYVbIhbMWQ5dFPS\n/0zVXT6tsMFODLdu3raBCzA3I8XUGAQj7bW2uM98zw9bQW3gYiAX9J3JIywM\nP6S3JHAKWLEEZYz3UMpoXku1KmIN10Y6iStfpNO0SGvT1FgWbqF1LsJtiDcV\nWFBnyh6iF+04kv7A9wXTCDUs3TGdG7scGIK4NYlv9vt5LfKCKjkBZ1KrVuwR\n6Ez4GSQIqgWTW2lTQS4r44LuppzzR3JrdQl8k4FrQJ/N/7X2LCb9nd82jEEy\nXAxm0/E+NieCRz7fpxWGqHj7HXR4Q4L79Kr2+ATbnLpOp/uBqIv6vkBGgeGY\ngUTL\r\n=seE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Sizes\n\n<sp-tabs selected=\"m\">\n    <sp-tab value=\"s\">Small</sp-tab>\n    <sp-tab value=\"m\">Medium</sp-tab>\n    <sp-tab value=\"l\">Large</sp-tab>\n    <sp-tab value=\"xl\">Extra Large</sp-tab>\n</sp-tabs>\n\n<div class=\"tabs--s\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"s\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--m\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"m\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--l\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"l\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--xl\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"xl\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n## Variants\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"a396c860b62c2f94b2e9fcd015a4962a6c57af36","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.4-alpha.169+a396c860","@spectrum-web-components/field-label":"^0.0.2-alpha.1394+a396c860"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.3"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.4-alpha.169_1610490129577_0.8436910728461224","host":"s3://npm-registry-packages"}},"0.2.4-alpha.178":{"name":"@spectrum-web-components/bar-loader","version":"0.2.4-alpha.178","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.2.4-alpha.178","maintainers":[{"name":"westbrook","email":"westbrook.johnson@gmail.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"613f6c4b91a37966019f945f2403f42fd89dc6d8","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.2.4-alpha.178.tgz","fileCount":28,"integrity":"sha512-ITqOP3GWcbHfooCsKAiq+vwdj6CPDMp9yXO2LlTzExey1Xla4Cg5sSPW2iCnOMuCjz4mVwVNTxHobDg23UbfGg==","signatures":[{"sig":"MEQCIHFUdcM4iv+2Xk0a2c+OdgPrX5sHKntvqw34dROBqiANAiAUwKs3i9fouJddcuZyQS7jHYuNXicSia9t6N160/v0Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/wUXCRA9TVsSAnZWagAA6BUP/AvoZik91n896YQuWi6j\n69JgLCJ2RpweXI5FUFiy7uSxO9JTeTfBQiwHqyJwDB4hTMzLebe82rtixTPo\n+KW2ArGLbQ3xxsDrBoKWGR0ePRIeBvuteg5eqNGt6eU7/2R6vdeLlKXQ5aVH\ntmN0CvvV0OE57AN55iLlvvRDHoutCS15lEzmMWuLZi2nakJG37IBlbIYjBUl\nZLJwY1ruX/hHy7ooE45EGy36bH2+rnUznFcqu2QHGPaZRujUqww5Mh+JJony\nNDXsIHUeJ3W+to/xLZgwtwq2N4vLiaQKEUL4wX6cWu+tutr1qJWZvt0HHzdS\nKk+w2rG7c5PwE5xNw8g+fQhbVafzJSY93t4/epAzuvwY5OO4D1YoFSxD4HQ9\njA3UuXfeOeZLhsE7CqR/Ju3zvb4ZR1ERwTR9oLo4h/4Dj1qYfeeKh5t9W6Qb\nuBHOIf5hNNNyr/LaNOpMe74/HqfXsYRZX9iy/LTPu+qyclrPBGTS/JnPMsMf\n1RJMkKm89tSP5ewWLMRrox4T13kX9orQ0MOU1MdVHlRuGecxPO5BaEArb2dM\nA+AZSPUtVhDIOcOPnbLZRaRgepnfo7soByNUxm8pK575uYug20fV6D6234Vs\nDk6kMEOHlXTLXwj2ovREckYLeS/GRigTnXO5Pio5Msu85fu3kdczQNzzCtpU\npl3j\r\n=LW1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Sizes\n\n<sp-tabs selected=\"m\">\n    <sp-tab value=\"s\">Small</sp-tab>\n    <sp-tab value=\"m\">Medium</sp-tab>\n    <sp-tab value=\"l\">Large</sp-tab>\n    <sp-tab value=\"xl\">Extra Large</sp-tab>\n</sp-tabs>\n\n<div class=\"tabs--s\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"s\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--m\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"m\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--l\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"l\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--xl\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"xl\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n## Variants\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"a6776aa098b05f71c1ec09bbf28acfaf62571d06","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.1.4-alpha.178+a6776aa0","@spectrum-web-components/field-label":"^0.0.2-alpha.1403+a6776aa0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.3"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.2.4-alpha.178_1610548495189_0.19504571376131885","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@spectrum-web-components/bar-loader","version":"0.3.0","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.3.0","maintainers":[{"name":"westbrook","email":"westbrook.johnson@gmail.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"f4985aa24c1a1b2a4a1b8eb4401daa8e60ddc343","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.3.0.tgz","fileCount":28,"integrity":"sha512-ipZsVdEgotyNF4HCXVKRAV21ZxcpDjAgKaOsnE/f6hJBcH47SnR2z6k+A8CG+32G0V5ursGIuJ/OzHAJfXuKFw==","signatures":[{"sig":"MEUCICrNpycIuWeXUwSomHqzXlWjfSr9rR3gRojjzVnV3bcrAiEArOH4mNsyhPFbcVRJsdN6o5OdOqWFqc6cXxFY2iDkcy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99105,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/z14CRA9TVsSAnZWagAAbbEP/R362v76UDB33HXIz2mP\nT24IAgbwb2ZOMWDYZp1s4HPYvxWaIZ9I97EETKSPxHIQ36AoQhrSz6RlQ1+7\nc/fp5lu6draBZ3QeSlidxKKCFUJ/xHiBLzLh2Ejlyu4SBUA9wSPsnzrjgvC8\n+L6V1MPaadRUuFMdvU5sRkotR7BUAMFJsC/8LVvTVNzQ3KPy7NT8jAQnjHcD\nFude7JkYTUjXuYJPwnZjEQstvensbRbvv1t0OEd4L+JaGt2teeHc0yM5kgKz\nxp7UIZVdkbpHYrE6RSecmOexu/wlY/C+2kQB3qH9uu/YszmiQ48DwrRngzIE\nfQsGdJ9+RJM0UIJxZxLs3QQyUURbqs7WK3P/M8GIDDZjaZdYkwpiPfmRSpte\npGFnaoO3GjvkQoUZ1IsnbfWhLmGqnQ2UKZPgjUtzminaYo+rkrb4ILB4Fqb2\nE2pPw9pnzRPbVt7LJEPMMDZRExtnOf37v7oaIgRPuuLb77F07ePLvZEK5YBK\nrdEI/b76tEiZlAuLDmR8o5mOw/QkCOUBL9hHYOx/pIsh5HyiS4AYJLgmfSiJ\n8U1vUSrPz1n5GHJVky+AF1W/EV7Bk4Fk3+aAqDQL7pU7RTCsmGa0ejcXiYIF\nf3iXmlO8YjS0UZnlSSd/0Q0t5iBiOYamaYEsVQPR3FC3xaEsSBVEeSfjcA0D\nsFen\r\n=NCmz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"62f319d0f7272f4ac83f35c8180e7c4adfff37e3","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.2.0","@spectrum-web-components/field-label":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.3"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.3.0_1610562936312_0.14742413956342126","host":"s3://npm-registry-packages"}},"0.3.0-alpha.40":{"name":"@spectrum-web-components/bar-loader","version":"0.3.0-alpha.40","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.3.0-alpha.40","maintainers":[{"name":"westbrook","email":"westbrook.johnson@gmail.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"892f9e07ed191cf9000ad7b72ae38d82f010da27","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.3.0-alpha.40.tgz","fileCount":28,"integrity":"sha512-rKfGtS2tmURXrwHLHSJNTLFOzHu5WCFEL7F2MPPD0JozGrzQK4A2pjwCmYuWtfQRDkV1ZBwecHLLphQOP+iaaQ==","signatures":[{"sig":"MEQCIFR1iQTUr54n7UrJKm8LK6R0wwZHbxZCu5DL1Scq3bskAiA9gq/U+jF2turEjNMqV2HFa4VCu8JDsn2FPCT/IjuyuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/07iCRA9TVsSAnZWagAAgxQP/2DQRKFpIQE5318yYpgk\nO8fm3Ed4K8FjTqivHzSPG4ybUxVaryiD0G/DHhzgKecqgTId0de0bF6BF+Kg\n+n7hRqKmwcUj4NggO8BucIqmjkMAclS0FQ0aa2Gj300U3chx4JY6MzYu/V7H\nAast1o4ard4kkDd+DP3G4QXgb1J04bB0LubHk9yUZJ42SpCKIZ6luuyRqmAk\n2LVAUmdrZqNsOBLDPifvGjqrBxJlBogY/GTZwAPEvXQyXrqixqgG9H91fkLx\nvwXiQPVDFCosFgXbEG/ShNFdzAvJdJSzPSL8KoZ0IgGCIfzRR3z/rdRLLhDk\nHrkufDBoHYEIC/nCfchoAYbu+48yq53NLOdLmHgK4TnIbbB7csCTYWqB0m7T\nADmGN5B8tQNENelhhfWxRWL9IOshGqZQBaZaxGfdLwYxUB3mf6cvBilJZ1Xq\noqbMDrgTFZeT4Bibhgtzgo2qB/MHdEKqRPi123rWMo8RjiEaeXBEFVaS5zve\nOetPyXKPUhwrfnP+X4Vgwnt6yAU0M8tW6iGE9oW6Cce0+KhjAnssw3E111aD\nRCUwt5nPswAzwcgPliKxKdOnLx6gAniFsagaoN4svlZM1pWQjd1yztOE3GWE\ndYIhTMTem+K3Js4uH9KlZWV+4074ZBbCsukrjQw2HP5/lQs9Lqjf0rfSo3qe\noNZf\r\n=MQtt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Sizes\n\n<sp-tabs selected=\"m\">\n    <sp-tab value=\"s\">Small</sp-tab>\n    <sp-tab value=\"m\">Medium</sp-tab>\n    <sp-tab value=\"l\">Large</sp-tab>\n    <sp-tab value=\"xl\">Extra Large</sp-tab>\n</sp-tabs>\n\n<div class=\"tabs--s\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"s\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--m\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"m\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--l\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"l\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--xl\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"xl\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n## Variants\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"47b96fc63e9b1cee03ba44793cfcd930488a7a17","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.20.2/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.2.0-alpha.40+47b96fc6","@spectrum-web-components/field-label":"^0.2.0-alpha.1407+47b96fc6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.3"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.3.0-alpha.40_1610567393574_0.8432439610028741","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@spectrum-web-components/bar-loader","version":"0.4.0","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.4.0","maintainers":[{"name":"westbrook","email":"westbrook.johnson@gmail.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"738f0780407859076539e632e60df16bb82a54a4","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.4.0.tgz","fileCount":28,"integrity":"sha512-fJlmWi4PDu/p7aI0OscapVryXAZrdAbI0KzScNSwDbm6RpUkBD1L0AgUH/j3GReX3m4dh9S28jSU9RS1pdRZjw==","signatures":[{"sig":"MEQCIFyvIgJEfghiCzRplbq1BwaQfzojVUO0P0NGuN+8rG2aAiBIcXR5McIcvy5J8eBeIQ+DUwOnof6Z//FfTrLaVTfCyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCbXICRA9TVsSAnZWagAAaCQP/3agjzDiV02EwVLSEQHP\nEdLFR6aRloFll/TOjx6Y3UfWD0wAqU7awNEuMPSkEYuDfjyzj208IhH/0tRj\nj3Ipm4dveoShKmvWvdFAmuZIJlQgb7T7P3gfCnJ0EGaoC0lTZl/BwCzNrlHv\nM/MUBc1qgy6kpFRA1eKkfBgyvkDeP8VpGLE6gHIiXOl7g2f8DnflHRHwsplj\nm/MSi96D1J+ePHvz2FS7jZLPsQoySXpIXiqyGNlyQ/i2IbHOP3Ics8h5bD0e\nakz7RkvjeBBxrtzFUD+/jSeqvfNR/LqpcKrOPdOAz1A2ksOlDLXMXEGR1o8b\nxayqZaZmdb+uk7RACJqNI7qnsI/U3tS161lIentYYJAUhTOPnozi6g861KhB\n47I4Y+YVybYYeGnZVc7Iy5N7K3UdcVzJdzDvgkIZCwf6JhwrnlTJ5TkivzHZ\nqXy/TdFuRp++CdXGEH3JtxbE/50oCsFMUF1adcKHmwE0aYrojkX1mGUx4h+R\nWAAj0PzDH7mAoVGwKaAvmh4PJ8WBtyavvT3W/5xR4GD3oa6oGyt4VlPUxMbm\nuHwPKyoURVsm3mirA6cXxsHOaf+7B+8r31l94nUEFMKuSgiQbMjTKhYl+JTX\nO3VAW6QSLsljk8npW4hOpFxRbhah/hSredal+i60MvZZPjf97zE6pXgwRDUP\nuKIM\r\n=l/gu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"a5734426f36555951dc10c5740c9044bbd951315","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.3.0","@spectrum-web-components/field-label":"^0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.3"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.4.0_1611249096077_0.13916830992284934","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@spectrum-web-components/bar-loader","version":"0.4.1","keywords":["spectrum css","web components","lit-element","lit-html"],"author":"","license":"Apache-2.0","_id":"@spectrum-web-components/bar-loader@0.4.1","maintainers":[{"name":"westbrook","email":"westbrook.johnson@gmail.com"},{"name":"benjamind","email":"ben@delarre.net"},{"name":"adixon","email":"adixon@adobe.com"},{"name":"cuberoot","email":"michael@maplekiwi.com"},{"name":"msdewey","email":"moiradewey@gmail.com"}],"homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"dist":{"shasum":"813da88ff609f6978a903e6d0772e1e5bc855f55","tarball":"https://registry.npmjs.org/@spectrum-web-components/bar-loader/-/bar-loader-0.4.1.tgz","fileCount":28,"integrity":"sha512-t3TH+hDkVwdMx78QL4cgWIvsEZG1TyhkxVeTJjNIvNkZtx+qrae9SkO/RuzgdldweHSMH29Lbf16VTiAdUOyVQ==","signatures":[{"sig":"MEYCIQD8i4O32MpHP59izwx5G2o94CgU1Ey9GDOvAlgWPXDZAwIhAKVDnlKId5qIhaBicH5tISkwUVBWRbfPlvqf8EZFqSIb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b1SCRA9TVsSAnZWagAAbyYP/iPRIjjR58gykAwLUO3w\nzEPdUuQGA5QshBi3QD3Spc78FROXsjuHle2palDnfTsuZbVnqYHKaJEZ9rFR\n5V/we8XtawJEC4XhHGShfH0REQen9J2k1OOHnSYNXCAXIFLUUH8iZab9QNaM\n7MOHJKfMP+89BCaacs7Dz98fXW7xqpKu/pWkw2pMcQvU9oqC3VnG64dbaMrX\nwPybqoPd41u+8ILuIXbNlTAgFAl3kafTkDeX3ZiG0P9KviT1KETrgYy6HWuJ\nlXp8QitI0pTz6/CA2M5mn/rspGOUXJL1rlXHe2Xl5Pc9G3K15f0NHlacJB1h\nZUOsB/Bp46INpoEsQsaaT6dY/O+crSztA2B+MsaOrS+Iuks3Hb5LyRiqhwei\nCuZbzMoZZnt902uLIQs5LCOAPJRk5fPc9ufCUdIl6Y1qex/EgwUuApSoZGsS\nAOJWT37jKVW6nTvD2kjTG0KVZrAOuJA1QFORD7ew3ePVEtj0KX9is6s1FFeU\nwO+Dk4V/CANAfEfWnQrFI8Jr2jTLjiCYObeFYLGxMI75UT3id/VeIPt18scT\nGspgYi4/k+XJsC2Q0GTLboZZessQ3jkrHoHkmgfmodo1576u3HQ9hqZYRMdh\nKDXpYKPXm8JRllkOEFKaR8qR7sofFCc+zMuDEnHSSNrSNhyv8BF1EXKO/0SD\n4xED\r\n=7AWI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":"./src/index.js","./src/":"./src/","./package.json":"./package.json","./sp-bar-loader":"./sp-bar-loader.js","./sp-bar-loader.js":"./sp-bar-loader.js","./custom-elements.json":"./custom-elements.json"},"gitHead":"7bac515d0291c21c9fc7482120904fe5c5c83200","scripts":{"test":"echo \"Error: run tests from mono-repo root.\" && exit 1"},"_npmUser":{"name":"westbrook","email":"westbrook.johnson@gmail.com"},"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (darwin)","description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","directories":{},"sideEffects":["./sp-*.js","./sp-*.ts"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.0.0","@spectrum-web-components/base":"^0.3.1","@spectrum-web-components/field-label":"^0.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@spectrum-css/progressbar":"^1.0.0-beta.3"},"_npmOperationalInternal":{"tmp":"tmp/bar-loader_0.4.1_1611859839908_0.11806754064278913","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-07-16T23:26:10.213Z","modified":"2026-01-15T20:37:36.402Z","0.0.2-alpha.940":"2020-07-16T23:26:11.697Z","0.1.0":"2020-07-17T21:39:30.730Z","0.1.1":"2020-08-19T22:24:26.422Z","0.1.1-alpha.95":"2020-08-20T18:31:35.077Z","0.2.0":"2020-08-31T18:05:21.651Z","0.2.1":"2020-09-25T12:18:36.598Z","0.2.2-alpha.17":"2020-10-08T04:00:26.548Z","0.2.2-beta.17":"2020-10-08T13:41:46.444Z","0.2.2":"2020-10-12T17:55:04.036Z","0.2.3-alpha.0":"2020-10-12T18:54:51.618Z","0.2.3":"2020-10-12T20:27:13.882Z","0.2.4-alpha.60":"2020-11-19T20:44:48.852Z","0.2.4-alpha.84":"2020-12-02T18:05:31.321Z","0.2.4-alpha.85":"2020-12-02T19:03:31.858Z","0.2.4-alpha.169":"2021-01-12T22:22:09.727Z","0.2.4-alpha.178":"2021-01-13T14:34:55.760Z","0.3.0":"2021-01-13T18:35:36.455Z","0.3.0-alpha.40":"2021-01-13T19:49:53.721Z","0.4.0":"2021-01-21T17:11:36.201Z","0.4.1":"2021-01-28T18:50:40.027Z"},"bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"license":"Apache-2.0","homepage":"https://adobe.github.io/spectrum-web-components/components/bar-loader","keywords":["spectrum css","web components","lit-element","lit-html"],"repository":{"url":"git+https://github.com/adobe/spectrum-web-components.git","type":"git","directory":"packages/bar-loader"},"description":"An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.","maintainers":[{"email":"caseyisonit@gmail.com","name":"caseyisonit"},{"email":"ttomar@adobe.com","name":"taratadobe"},{"email":"rajrock38@gmail.com","name":"rajrock38"},{"email":"jnjosh@gmail.com","name":"jnjosh"},{"email":"nikkimk06@gmail.com","name":"nikkimk"},{"email":"rubcar@sapo.pt","name":"rubenc"},{"email":"jian.liao@gmail.com","name":"jianliao79"},{"email":"pvashish@adobe.com","name":"pvashish"},{"email":"patrickfulton@gmail.com","name":"patrickfulton"}],"readme":"## Description\n\nAn `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.\n\n### Usage\n\n[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bar-loader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bar-loader)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bar-loader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bar-loader)\n\n```\nyarn add @spectrum-web-components/bar-loader\n```\n\nImport the side effectful registration of `<sp-bar-loader>` via:\n\n```\nimport '@spectrum-web-components/bar-loader/sp-bar-loader.js';\n```\n\nWhen looking to leverage the `BarLoader` base class as a type and/or for extension purposes, do so via:\n\n```\nimport { BarLoader } from '@spectrum-web-components/bar-loader';\n```\n\n## Sizes\n\n<sp-tabs selected=\"m\">\n    <sp-tab value=\"s\">Small</sp-tab>\n    <sp-tab value=\"m\">Medium</sp-tab>\n    <sp-tab value=\"l\">Large</sp-tab>\n    <sp-tab value=\"xl\">Extra Large</sp-tab>\n</sp-tabs>\n\n<div class=\"tabs--s\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"s\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--m\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"m\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--l\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"l\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n<div class=\"tabs--xl\">\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        size=\"xl\"\n        label=\"Loaded a little\"\n        progress=\"22\"\n    ></sp-bar-loader>\n</div>\n```\n\n</div>\n\n## Variants\n\n### Over background\n\nWhen a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);\"\n>\n    <sp-bar-loader progress=\"7\" over-background></sp-bar-loader>\n</div>\n```\n\n### Indeterminate\n\nA bar loader can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader indeterminate></sp-bar-loader>\n</div>\n```\n\n### Side Label\n\nA bar loader can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.\n\n```html\n<div\n    style=\"width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;\"\n>\n    <sp-bar-loader\n        side-label\n        indeterminate\n        label=\"Label Beside\"\n    ></sp-bar-loader>\n</div>\n```\n","readmeFilename":"README.md"}